I am creating a Google Chrome extension and I need to import the page HTML into my extension as a string so that it can be used.
I have tried:
document.getElementById('container');
But I get a "null" in return. I have made sure that it is the correct div id.
Is there something wrong with the code I am using or does this method simply not work?
To get your container div as String you shoud use innerText or innerHTML.
As Follows :
var asText = document.getElementById('container').innerText;
var asHTML = document.getElementById('container').innerHTML;
If you get a null answer without using any methods it means either your div doesn't exist or not is loaded.
Edit :
Don't forget to specify in the manifest.json file at which time your javascript should be executed.
You can do this by using the run_at parameter.
manifest.json
{
"name": "The name of your extension",
"version": "0.0.1",
"manifest_version": 2,
"description": "Your description goes here",
"homepage_url": "http://example.com/",
"content_scripts": [
{
"run_at": "document_end",
"all_frames": false,
"matches": [
"*"
],
"js": [
"*"
]
}
],
"web_accessible_resources": [
"*"
],
"permissions": [
"storage"
]
}
Related
I'm working on an extension that injects a piece of code into iframes.
I'm using manifest v3 and I have a content script that injects a script tag with my code into the iframes.
The issue comes when we have an iframe with src set as data URI like so:
<iframe src="data:text/html;base64,PHNjcmlwd...3NjcmlwdD4="></iframe>
When the content script injects the custom script tag, unlike all other possible ways to create an iframe element, this one throws an error saying the script tag is not included in the "web_accessible_resources" even tho it is. (otherwise, all other iframes would fail as well)
Error: Denying load of chrome-extension://obfggkijinagdggiiigfpppiaoielnjo/src/dest/payload-min.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
I believe this is a chrome bug but I'm asking for an alternative way to achieve my goal before contacting the chrome dev group.
manifest.json:
{
"name": "My Extension",
"version": "1.0",
"manifest_version": 3,
"incognito": "spanning",
"background": {
"service_worker": "background.js"
},
"permissions": [
"browsingData",
"windows",
"activeTab",
"tabs",
"webNavigation",
"webRequest",
"declarativeNetRequest",
"declarativeNetRequestWithHostAccess",
"declarativeNetRequestFeedback"
],
"host_permissions": [ "*://*/*" ],
"content_scripts": [
{
"all_frames" : true,
"run_at" : "document_start",
"match_about_blank" : true,
"match_origin_as_fallback": true,
"matches": ["*://*/*"],
"js": ["./content-script.js"]
}
],
"web_accessible_resources": [
{
"resources": [ "/src/dest/payload-min.js" ],
"matches": [ "<all_urls>" ]
}
]
}
content-script.js:
var script = document.createElement('script')
script.setAttribute('class', 'myScriptClass')
script.src = chrome.runtime.getURL('/src/dest/payload-min.js')
;(document.head||document.documentElement).appendChild(script)
This is my first attempt writing a Chrome extension. I added "web_accessible_resources": ["images/icon.png"] to manifest.json because I wanted to access the image from content script. After adding this line, I got the error "Invalid value for 'web_accessible_resources[0]'.
Could not load manifest." I have checked to make sure the file path is correct, where else could I be wrong?
Any help is appreciated.
{
"name": "Bookmark Checker",
"version": "1.0",
"manifest_version": 3,
"permissions": [
"bookmarks",
"activeTab"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches":["https://www.google.com/search?*"],
"js": ["content/content.js"]
}
],
...
"web_accessible_resources": ["images/icon.png"]
}
The syntax for web_accessible_resources in Manifest V3 has changed:
"web_accessible_resources": [{
"resources": ["/images/icon.png"],
"matches": ["<all_urls>"]
}]
The matches key must specify where to expose these resources since Chrome 89.
I am working with a chrome extension . I want to inject js script in all tab. I am using this manifest.json :
{
"name": "ABC",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"src/background/background.min.js"
],
"persistent": true
},
"browser_action": {
"default_icon": "icons/128.png",
"default_title": "ABC",
"default_popup": "src/browser_action/index.html"
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"<all_urls>"
],
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["./src/inject/inject.min.js"],
"css": ["./css/inject.min.css"],
"all_frames": true
}]
}
And my inject.js is like this :
(function() {
console.log("Hello");
});
I am getting all log from all tab except the tab of the chrome setting (eg : chrome://extensions/:id , chrome://history etc).
Am I missing something in manifest.json or chrome disables the feature of injection in settings page ?
Thanks in advance.
Indeed, you can't inject code into chrome:// pages. They contain control elements / code that can modify the browser in ways that an extension is not allowed to.
Chrome resolves this by simply not allowing permissions to be set for chrome:// URLs, and <all_urls> does not include it.
However, you could use Override Pages to replace some of them (well, History page at least) completely.
I want to create a new chrome extension but it don't work.
I want to inject a js file into web page (all web page,not only one.If i push the chrome icon on google the script must execute,if i push the icon on facebook it must execute ect.)
this is background.js
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
null,{file: "backgrounds.js"} });
});
this is backgrounds.js
document.body.innerHTML="display div elem with style and id";
this is manifest.json
{
"name": "MyExt",
"description": "an extension,what else?",
"version": "1.0",
"permissions": [
"activeTab"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["background.js"]
}
],
"browser_action": {
"default_title": "myExt"
},
"manifest_version": 2
}
what i wrong?
I'm on windows 8.1 Update 1 with chrome last version
Your manifest is wrong: you should set background.js as your background script:
"background" : { "scripts" : [ "background.js" ] },
and remove the "content_scripts" section.
The "activeTab" permission means that you don't need to specify host permissions to inject in the current tab upon browser action click, so no other permissions are needed.
The tabId argument is optional, you can just drop it instead of passing null. And your invocation is wrong (you're wrapping two arguments in a single object). Here's the correct way:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({file: "backgrounds.js"});
});
I'm trying to write my first Chrome extension. It would, when clicked, automatically fill the fields of an ID and password for my University's login page (which has its form's auto-fill disabled).
It's a very specific page.
I have a few problem.
I've searched Google and SO but couldn't find an explanation on how to change the value of a text field through Chrome. I know how to do this in HTML and JavaScript, however I couldn't get the proper input to modify its text.
I've also tried using jQuery using a few examples I've found, but no luck.
I have an HTML page (popup.html) which calls a JavaScript file.
I've also tried placing the JS in a content script
Here's the manifest.json:
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery-1.7.2.min.js","content.js"]
}
]
}
One of my attempt of popup.js (which gets called from popup.html) is:
chrome.tabs.getSelected(null, function(tab) {
console.log(document)
});
I've also tried placing this code inside the content.js. same result,
It prints to console, however it prints the popup.html content..
I've also tried directly (and from the above method) to access an element directly by document.getElementById() but still no luck..
So,
Can anyone tell me what I'm doing wrong?
You need to inject a JavaScript file to the page using the "web_accessible_resources" attribute. See here:
manifest.json
{
"name": "My First Extension",
"version": "1.0",
"manifest_version": 2,
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs", "http://*/*"
],
"content_scripts": [
{
"matches": ["http://*/*"],
"js": ["jquery-1.7.2.min.js","content.js"],
"run_at": "document_start"
}
],
"web_accessible_resources": ["inject.js"]
}
inject.js
(function () {
console.log('test');
}());
content.js
(function (chrome) {
var js = document.createElement('script');
js.type = 'text/javascript';
js.src = chrome.extension.getURL('inject.js');
document.getElementsByTagName('head')[0].appendChild(js);
}(chrome));
Then just put the JavaScript code you want to use in inject.js to manipulate the page. Be sure to change matches to only match your University's login page.
The reason this is the case is because Chrome extensions can run and operate on their own regardless of which website you're on. And they can continue to process as you switch pages. They're in their own sandboxed environment.
I think you should use a simple content script that is executed on the login page. You don't even need any browser action or popup for that.
Here's a manifest:
{
"name": "Fill my password",
"version": "1.0",
"manifest_version": 2,
"description": "Fills my password on University login page",
"content_scripts": [
{
"matches": ["http://www.myuniversity.edu/login.html"],
"js": ["content.js"]
}
]
}
And here's a content script:
// define your username and password
var myUsername = '...';
var myPassword = '...';
// find the fiends in your login form
var loginField = document.getElementById('...');
var passwordField = document.getElementById('...');
// fill in your username and password
loginField.value = myUsername;
passwordField.value = myPassword;
// if you want, you can even automaticaly submit the login form
var loginForm = document.getElementById('...');
loginForm.submit();
Possible workaround(chrome extension): Autocomplete = on, but it could not work with some forms.