I am trying to do a chrome extension.
What I am basically try to do is implement : document.designMode = ‘on’. I don’t want to always have to go to the console from the browser to do this. I have gone far with building the extension, but the problem is that once I click on it. The script I wrote is just affecting the popup.html file.
It is not affecting the particular site.
Create content.js file;
Inside content.js add JS code to run on site;
Include code to manifest.json:
"content_scripts": [
{
"matches": [
// add site urls where you want to run your extension
],
"all_frames": true,
"js": [
"content.js" // here's your js
]
}
],
"permissions" : [
"declarativeContent"
],
Related
Suppose that 2 extensions are installed in Google Chrome.
1st extension runs content.js on w3.org:
manifest.json:
"content_scripts": [{
"matches": [ "https://www.w3.org/*" ],
"all_frames": true,
"js": [ "content.js" ]
}]
content.js:
alert('content');
2nd extension has page.html, which loads w3.org into iframe:
manifest.json:
"web_accessible_resources": ["page.html"]
page.html:
<!DOCTYPE html>
<iframe src="https://www.w3.org/"></iframe>
Now enter in address bar chrome-extension://2nd-extension-id/page.html. You will see w3.com, but content.js was not running (no alert() window). I do not see errors in console.
The question is: how to permit content script to run in this iframe?
I created Chrome issue. Status: WontFix, unfortunately. But this is can be changed in future...
You can't with extensions but you could do something similiar in Google Apps:
you can use webview instead of iframe. Therefore you can inject script through executeScript method.
I've got a Google Chrome extension which has the following content script syntax in it's manifest.json:
"content_scripts": [
{
"matches": [
"https://example.com/*"
],
"js": ["js/jquery-2.1.1.js", "js/custom.js"],
"run_at": "document_end",
"all_frames": true
}
],
When testing this extension on an Ember site, it runs on initial page load but after changing the page, it does not get injected again.
For non-Ember users, Ember can update the URL and page content without performing an entire page reload which appears to be causing this issue.
Is anyone aware of a work-around for examples like this?
This was fixed by using chrome.WebNavigation.onHistoryStateChanged which fires every time the page updates.
I'm developing Chrome Extension and I need to load a javascript file to content scripts, but that file is being served via webpack-dev-server. So it's approachable only on localhost.
I tried to change my manifest.json:
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"http://localhost:3000/scripts/content_bundle.js"
],
"run_at": "document_end",
"all_frames": false
}
But then I got an error in Chrome Extensions window:
Only local files can be specified in "content_scripts" section.
Solution:
add "permissions": ["http://localhost:3000/scripts/*", "tabs"] to manifest.json
download the script using XMLHttpRequest (there are many examples) in your background script (or better an event page script) when needed
save it in chrome.storage.local or localStorage (so you can load it on every extension start from the storage without redownloading)
inject the script:
add a tabs.onUpdated listener and inject the script using tabs.executeScript
alternatively use declarativeContent API with RequestContentScript action (despite the warning on the doc page it should be actually supported in the Stable channel but of course do some tests first).
In my web application i want to put a code that upon that execution it should redirect the current tab to some extension page?
If i do
window.location = 'chrome-extension://idgpnmonknjnojddfkpgkljpfnnfcklj';
it redirects me to 'about://blank' not on that particular extension page.
Can some one help me out how to achieve the same.
First of all you need to put all the resources of your chrome extension to the web_accessible_resources.
You also need to trigger redirect behavior. You can do it with content_scripts and you will need permissions for the specific domain.
Eventually you will have mainfest.json like:
"permissions": [
"*://example.com/*"
],
"content_scripts": [{
"js": ["injection.js"],
"matches": ["*://www.example.com/*", "*://example.com/*"]
}],
"web_accessible_resources" : [
"index.html",
"main.js",
"favicon.ico"
],
And injection.js like:
location = 'chrome-extension://'+chrome.runtime.id+'/index.html';
I have a chrome extension.
The manifest.json is
"content_scripts": [
{
"all_frames": true,
"js": [ "content.js" ],
"css": ["style.css"],
"matches": [ "*://www.facebook.com/*"],
"run_at": "document_start"
},
The content.js just is
console.log("say hi");
And console is
Please see this picture http://i.imgur.com/SuBnbnT.png
It called four times. It just happened in facebook.com, not happened in other website such as www.google.com. Any idea? Thanks.
I'm not sure if Facebook uses frames, but if it does it is possible that there are four frames that are executing your code once each. Chrome console doesn't give any visual indication that this is what is happening. Try setting all_frames to false so that it only executes on the top frame.
You've specified all_frames: true. There's likely a few iframes on the page causing content.js to be executed multiple times.