I have a Chrome extension, that has different scripts for several pages:
{
"name": "My extension",
"version": "1.0.0",
"manifest_version": 3,
"content_scripts": [{
"matches": ["https://first/page"],
"run_at": "document_idle",
"js": ["first.js"]
}, {
"matches": ["https://second/page"],
"run_at": "document_idle",
"js": ["second.js"]
}]
}
I want to use some helper functions in both scripts. How do I load a second file, e.g. lib.js so that functions defined in there are available?
I've tried using chrome.runtime.getURL which gets me a URL to the file, but doesn't allow me to "load" it. I also tried just adding the file to the js property, which makes the file load but when trying to call the functions they are undefined. And I've tried several types of import statement, but haven't gotten them to work either.
So, how can I do this without duplicating the common code into both content script files?
Related
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"
],
I'm writing a chrome extension that uses content script to make Google tasks web UI look a little better. The extension used to work fine, but it didn't work anymore starting from the recent 1~2 days.
After investigation, it seems that content script does not execute in mail.google.com domain. To verify this, I changed manifest to match all web pages:
manifest.json:
{
"manifest_version": 2,
"name": "Tasks",
"short_name": "Tasks",
"description": "Use Google Tasks in a much nicer way.",
"version": "0.0.2",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["js/script.js"]
}
]
}
js/scipt.js
alert('Content script is alerting.');
With this change, I can see chrome pop up an alert window when I visit pages like https://www.google.com/, https://stackoverflow.com and etc, but NOT https://mail.google.com/tasks/canvas, OR https://mail.google.com/mail.
Is there anything on mail.google.com that prevents content script from executing? How can I fix this? Thanks!
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).
I just started playing with Chrome extensions, trying to load JQuery from manifest file, and test if it's loaded. It is not loading, although I did specify it in content-scripts! Any idea why?
sample.js
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}
manifest.json
{
"manifest_version": 2,
"name": "__MSG_extName__",
"version": "0.1",
"default_locale": "en",
"background": { "scripts": ["sample.js"] },
"permissions": ["contextMenus"],
"minimum_chrome_version": "33",
"content_scripts": [{
"matches": ["<all_urls>"],
"css": ["style.css"],
"js": ["lib/jquery-1.11.0.js"]
}]
}
As noted in the comments to the question, you are doing things in two different contexts.
The "background" key defines what is loaded in a single invisible page where the "main" code resides.
"content_scripts" injects code into other pages instead, that can communicate with the background page via Chrome API.
A good overview is available here.
It's not immediately clear why <all_urls> match pattern does not inject the script into your background page, but fact is, it's not.
How to modify your example depends on what you try to achieve.
If you need sample.js to be executed on every page when it loads, you need to move it to the "content_scripts" key. Note that most of the Chrome API will be unavailable.
If you also need jQuery in your background page (doubtful, but possible), you can add it to the background.scripts list.
If you need some processing done that is not available to the content scripts, then you need to have two scripts, one background script that does the work and an injected content script that communicates with it via Messaging API.
To inject jQuery to every page you can do use this approach.
Add the following line to the manifest.json file. This specify that packaged resource (jQuery file inside extension) is expected to be usable in the context of a web page.
"web_accessible_resources": ["lib/jquery-1.11.0.js"]
Add the following code into new file located in your (file manifest.json) "content_scripts: [{ "js": new_file.js }]" to actually inject jQuery when onLoad event triggers:
The new_file.js file:
var s = document.createElement('script');
s.src = chrome.extension.getURL('lib/jquery-1.11.0.js');
(document.head||document.documentElement).appendChild(s);
s.onload = function() {
s.parentNode.removeChild(s);
};
Okay, so here's my problem:
On my home computer, I have a Google Chrome Extension installed - WXFZ's \Code. This extension works perfectly, I use it every day for work purposes. However, I guess the developer gave up on it, because it can no longer be found on the Google Extensions download page.
I'm trying to transfer that extension from my home computer to my office computer. I have the extension folder on my work computer and I've tried dragging and dropping it into the extensions page to install it, but I receive an error:
"Could not load extension from 'U:\Downloads\pekinghlicdifnlgafajjohhoiochfdh\2.1_0'. The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details."
I'm not entirely sure what that means, but I've copied the contents of the manifest folder below. I've tried changing some things around in the manifest file, but nothing would work :/
{
"app": {
"launch": {
"local_path": "bscode.html"
}
},
"background_page": "storage.html",
"content_scripts": [ {
"all_frames": true,
"js": [ "js/jquery-1.4.4.min.js", "js/bscode.js", "js/bscode-cs.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"description": "Simple \\code and \\\\macro engine for common web-forms.",
"icons": {
"128": "icon_128.png",
"16": "icon.png",
"48": "icon_48.png"
},
"key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQClVb9xGcyZp3P4Fe+rpjGUqVrvRq8rqQl278gMjFzmxqD65cu7uf/erOBlFWbAc6YK15yvgnsYn+HDYvoSV4shajLAnytek7CI35nia5AnYACJsXW+JrfoT9pEgK9Zd4fE1XFr8bNCzhwKeoupH+gtMdvJ9lqAN4Xj/Tam5+QvzQIDAQAB",
"name": "wxfz\u2019s \\code",
"permissions": [ "http://*/*", "https://*/*", "tabs" ],
"update_url": "http://clients2.google.com/service/update2/crx",
"version": 2
}
Any advice on this problem, I'd appreciate it. Like I said, the extension still works; I was assuming there has to be a way to get it to work on my other computer :/
UPDATE
My apologies, the updated source code is :
{
"app": {
"launch": {
"local_path": "bscode.html"
}
},
"background_page": "storage.html",
"content_scripts": [ {
"all_frames": true,
"js": [ "js/jquery-1.4.4.min.js", "js/bscode.js", "js/bscode-cs.js" ],
"matches": [ "http://*/*", "https://*/*" ]
} ],
"description": "Simple \\code and \\\\macro engine for common web-forms.",
"icons": {
"128": "icon_128.png",
"16": "icon.png",
"48": "icon_48.png"
},
"key":"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQClVb9xGcyZp3P4Fe+rpjGUqVrvRq8rqQl278gMjFzmxqD65cu7uf/erOBlFWbAc6YK15yvgnsYn+HDYvoSV4shajLAnytek7CI35nia5AnYACJsXW+JrfoT9pEgK9Zd4fE1XFr8bNCzhwKeoupH+gtMdvJ9lqAN4Xj/Tam5+QvzQIDAQAB",
"name": "wxfz\u2019s \\code",
"permissions": [ "http://*/*", "https://*/*", "tabs" ],
"update_url": "http://clients2.google.com/service/update2/crx",
"version": "2.1"
"manifest_version": 2
}
In the original post I had:
"version": 2
I see now that was incorrect, it was supposed to be 2.1, so I changed that back, along with making the changes you suggested.
The error you get is asking for a "manifest_version": 2 property in your manifest.json. So, at the very least youneed to:
Change "version": 2 to "version": "2" (version must be a string value).
Add "manifest_version": 2 (2 without quotes - it's a number value).
Change "background_page": "storage.html", to "background": {"page": "storage.html"},.
Beware though that some features may break and need refactoring as well (in order to conform with manifest v2).
UPDATE:
It turned out there were quite a few things that needed to be changed in order for the extension to be compliant with Manifest V2 (and functional). The re is no point in posting the code here or list every single modification in detail, so I'll try to summarize and focus on the "nature" of the modification (see further down for a link to the updated source code):
The major source of problems was the fact that the new Content Security Policy (CSP) that applies to Google Chrome Extensions does not allow eval and inline scripts/event listeners. To circumvent this the following changes were necessary:
Declare a CSP in the manifest that allows eval
("content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'").
Unfortunately(?) there is no way to relax the policy against inline scripts.
In the background page (namely storage.html, an inline script was used, so I ended up moving the code to an external file (background.js) and including the JS scripts like this:
"background": {
"persistent": true,
"scripts": [
"js/bscode.js",
"js/background.js"
]
},
The old jquery-1.4.4 (which relies on inline scripting) was a no go as well. So I had to replace to the less old jquery-1.7.2 (I tried using the latest versions of jquery and jquery-ui, but they didn't play well with the rest of the code, so I rolled back to the oldest version that didn't rely on inline scripting). This change affected both the content_scripts declaration and bscode.html (where the user-defined macros are defined and edited).
Migrating to jquery-1.7.2 required porting all occurrences of the deprecated .live() to the equivalent syntax using .on(). (Luckily, this only affected one file: chrome-ui.js)
bscode.html had 2 inline scripts that needed to be moved to an external file (and placed at the right place inside the body, since the code calls document.write.
bscode.html had a lot of inline event listeners, which would not work. Furthermore, elements (which also contain inline event listeners) are inserted dynamicaly into the DOM, so the solution had to take that into account as well.
I tackled both the problems by using an external JS file that utilizes a MutationObserver to listen for node insertions and convert any inline event listeners to "attached" event listeners (by means of addEventListener()).
Finally, to make things easier, I set-up bscode.html as the Options Page for the extension, so you can quickly bring it up from the chrome://exrensions page.
(I hope I didn't leave something out...)
The refactored (and fully functional as far as I can tell) source code of the extension can be downloaded here.