I'm having a problem controlling what pages my content scripts are injected into. The chrome extension developer guide specifies that I can use an "exclude_matches" directive in my manifest.json to exclude certain pages from injection.
However, this doesn't seem to have any effect. My content script still executes on pages that I have specified as ignored.
I have put the steps to reproduce in a Gist. The code is also available on Github.
Any ideas what I'm doing wrong?
manifest.json
{
"name": "Testing Extension",
"version": "1.0",
"description": "Test the chrome extensions exclude_matches.",
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": ["http://news.ycombinator.com/"],
"js": ["content.js"]
}]
}
content.js
console.log("hello from the content script");
This is Bug #100106. exclude_matches do not function properly.
To solve the problem, use exclude_globs instead of exclude_matches.
Also, your exclude_matches rule does only match http://news.ycombinator.com/.
Suffice the pattern with an asterisk to match the whole site: http://news.ycombinator.com/*.
See also: Match patterns.
Related
I'm trying to load an extension, which was originally developed for Chrome, into Firefox. I'm aware that there are subtle differences, my idea was to fix the errors one by one.
The manifest can actually be loaded, an icon is added and the extension is listed as installed.
But during the loading, there are two warnings. One of them is:
Reading manifest: Error processing content_scripts.0.permissions: An unexpected property was found in the WebExtension manifest.
Unfortunately, this doesn't tell me which property is unexpected. I opened the debug consoles, the message is identical, there is no additional information.
The content_scripts section from the manifest is this:
"content_scripts": [
{
"css": [
"extra.css",
"all.css",
"bootstrap.min.css"
],
"js": [
"firebase.js",
"jquery.min.js",
"content.js",
"popper.min.js",
"bootstrap.min.js"
],
"matches": [
"https://dlab.epfl.ch/*",
"https://*.wikipedia.org/*"
],
"permissions": [
"storage",
"activeTab"
]
}],
The permissions look good to me. I checked against the Mozilla docs here, to avoid something like a spelling mistake. But storage and activeTab are allowed as permissions.
How can I find out what this unexpected property is ?
For reference, here is the full manifest: https://pastebin.com/dkaNmZHk
As #wOxxOm said, it is a simple mistake in the JSON layout:
permissions should be top-level and not within content_scripts.
Im trying to write a Chrome extension that has a dev tools panel. This extension needs to call functions defined on a property on window in a webpage that I also have made. In other words, the extension is only for my own web page and I control both. Example:
// This script is added in my own webpage application when it loads
window.myTest = () => { /* do something */ }
I want to be able to call the function window.myTest from my Chrome extension. I need to make similar functionality like https://github.com/zalmoxisus/redux-devtools-extension.
It seems that I need to do this by inject script/code from my backend page. I have all working, extension with backend page that gets invoked and I can see that the code that I inject gets called in the page context (testing by console.log gets written to the console output of the page).
Here is my code:
manifest.json
{
"manifest_version": 2,
"name": "MyTest",
"description": "MyTest",
"version": "0.0.1",
"minimum_chrome_version": "10.0",
"devtools_page": "devtools.html",
"background": {
"scripts": ["background.js"]
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["testscript.js"]
}],
"permissions": [
"tabs",
"<all_urls>"
]
}
testscript.js
window.myTest(); // myTest is undefined in the context of the injected script
background.js
// empty, but here to be able to open background page
I also have a pannel that sends a message to the background page when a button is clicked. I know that the panel and sending the message also work. But window.myTest is still undefined.
Edit
Removed the injection from background.js, because I did not use it and have same issue as described.
Finally, I got the specs on this. Mozilla and Chrome follow the same specs for extensions.
Content scripts get a "clean" view of the DOM. This means:
Content scripts cannot see JavaScript variables defined by page
scripts.
If a page script redefines a built-in DOM property, the
content script sees the original version of the property, not the
redefined version.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts
I have a Chrome extension that uploads to the Chrome store just fine. My current manifest file is posted below. It is saved in ANSI format as suggested in previous posts with this issue. This is the third variant and they all produce the same error message when I try to install: "Invalid manifest". No real information. I have tried waiting 24 hours for it to propagate properly as suggested in previous posts, but to no effect.
Has anyone encountered this issue before?
The extension is here: https://chrome.google.com/webstore/detail/bamboo-dialog-fixer/oelecpkhobhmbbdmehaoonkbkdodhdio?hl=en-US
{
"manifest_version": 2,
"name": "Bamboo dialog fixer",
"version": "1.3",
"description": "This extension makes bamboo popup dialogs such a the performance dialogs fit the width of the screen.",
"icons": {"128": "BambooHR_FullSize.png"},
"content_scripts":
{
"css": "styles.css",
"matches": "https://*.bamboohr.co.uk/*"
}
}
Thanks wOxxOm. I must have screwed up, even though I thought I had it right on a previous occasion. I rewrote the file as below and uploaded and it works now.
{
"manifest_version": 2,
"name": "Bamboo dialog fixer",
"version": "1.4",
"description": "This extension makes bamboo popup dialogs such a the performance dialogs fit the width of the screen.",
"icons": {"128": "BambooHR_FullSize.png"},
"content_scripts": [
{
"css": ["styles.css"],
"matches": ["https://*.bamboohr.co.uk/*"]
}
]
}
This question is more for the benefit of others and my own curiosity, as I have synthesized a workaround for now (using "matches": ["http://*/*", "https://*/*"] and if (location.hostname == "www.youtube.com").
Anyway, when I have an issue like this I break the code down into simpler and simpler forms until it starts to work. Then I can figure out what's tripping up the code. But I've hit that point now where it can't get simpler and it still doesn't work. Chrome just won't inject a content script into any of YouTube's pages.
Files (link to ZIP of the following)
manifest.json:
{
"name": "test",
"version": "0",
"manifest_version": 2,
"content_scripts": [
{
"js": [
"test.js"
],
"matches": [
"*://youtube.com/*"
],
"run_at": "document_end",
"all_frames": true
}
]
}
test.js:
alert("test");
Progress
Doesn't work:
Varying the values and statically defining (no wildcards) the matches URL
Varying the values of run_at
Varying the values of all_frames
Varying the scripting in test.js
Fresh install of Chrome v24.0.1312.57 on a fresh install of Windows 7 x64
Does work:
Changing the matches value to ANYTHING other than YouTube
Changing the matches value to "http://*/*", "https://*/*"
I feel like I'm missing something really obvious here, but it's been days.. ;/
This works for me if you define the match in the manifest as "http://www.youtube.com/*"
I'm developing a google chrome extension and I'm running into a relative path problem.
If I give a relative path to an image and open the plugin in a certain page it will look for that image in the website's path rather than the extension's.
Any ideas?
If you're using CSS in your extension pages (background, popup, infobar, etc) then you can use relative paths with a slash (/):
background-image:url("/sprites.png");
The above should work, everyone uses it. But, if your using it for content scripts and you can do the same for any css, you would need to use the predefined message like:
background-image:url('chrome-extension://__MSG_##extension_id__/sprites.png');
If you want to programmatically set it, you can use the chrome.extension.getURL syntax as following:
var url = chrome.extension.getURL('sprites.png');
These are the ways that you can refer to a specific url/image.
In addition, as mentioned in this answer, if you place your image assets in a directory, these files are not accessible in the web page DOM automatically. The developer should specify the resources that can be loaded the page by using the "web_accessible_resources" setting in the manifest.json file:
#mohamed's answer worked for me but it took my a while to put it all together. I've answered this else where but here is the solution that worked for me.
My solution.
With Menifest v2 you need to add web_accessible_resources to the file and then use chrome-extension://__MSG_##extension_id__/images/pattern.png as the url in your css file.
CSS:
#selector {
background: #fff url('chrome-extension://__MSG_##extension_id__/images/pattern.png');
}
Manifest.json
{
"manifest_version": 2,
"name": "My Extension Name",
"description": "My Description",
"version": "1.0",
"content_scripts": [
{
"matches": ["https://mydomain.com/*"],
"css": ["style.css"]
}
],
"permissions": [
"https://mydomain.com/"
],
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "My Extension Name"
},
"web_accessible_resources": [
"images/pattern.png"
]
}
p.s. Your manifest.json might look different to this one.
In some cases you might even use inline base64 encoding of the image. For example,
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB..." />
Same you can apply to your CSS. You can find image encoders all over the web.