I'm trying to made a simple google chrome extension using webRequest and onCompleted listener. When all the info is loaded i want to show an alert message, but is not working :(
Manifest
{
"name": "Test",
"version": "0.1",
"minimum_chrome_version": "10.0",
"description": "Test Google Chrome Extension",
"background_page": "background.html",
"permissions": [
"webRequest",
"*://*/*"
],
"content_security_policy": "default-src 'self'"
}
Background.html
chrome.webRequest.onCompleted.addListener(
function(details) {
alert(details.url);
},
{urls: ["*://*/*"]},
["requestHeaders"]
);
Solution
I solved the problem :)
I changed the line "requestHeaders" to "responseHeaders".
The solution was to change the line ["requestHeaders"] to ["responseHeaders"].
New Background
chrome.webRequest.onCompleted.addListener(
function(details) {
alert(details.url);
},
{urls: ["*://*/*"]},
["requestHeaders"]
);
Related
I am trying to change my extension's icon from a background page (manifest v2), using:
chrome.browserAction.setIcon({path:{'48':'images/iconready.png'}});
By default, I get a surprising:
Could not load action icon 'images/iconready.png'.
Context
_generated_background_page.html
Stack Trace
_generated_background_page.html:0 (anonymous function)
Nothing to see here, move along.
as well as:
Unchecked runtime.lastError: Could not load action icon 'images/iconready.png'.
Here is my manifest:
{
"name": "myname",
"version": "1.0",
"description": "my description",
"manifest_version": 2,
"icons": {
"48": "images/icon.png"
},
"browser_action": {
"default_icon": "images/icon.png",
"default_popup": "hello.html"
},
"background": {
"scripts": [
"background.js"
],
"persistent": true
},
"web_accessible_resources":[
"images/icon.png",
"images/iconbusy.png",
"images/icondisc.png",
"images/iconready.png"
],
"permissions": [
"notifications",
"activeTab", "tabs",
"webRequest", "webRequestBlocking",
"proxy",
"webNavigation",
"https://*/*",
"http://*/*",
"<all_urls>"
]
}
(note that I've tried it with and without the "web_accessible_resources" part, it doesn't change a thing)
I've tried adding the following, and suddenly, it works, and I DO see the icon changing, which means that my code, path etc. is valid:
"content_security_policy": "default-src 'self';img-src *",
However, my extension does need connect permissions, thus the previous line MUST be something like this instead:
"content_security_policy": "default-src 'self';connect-src *;img-src *",
Unfortunately, as soon as I add the connect-src permission, the icon doesn't load anymore and gives the same error again.
Note that this is chromium on linux. Could this be a nasty bug?
What could I be doing wrong?
Thanks!
I've been trying to migrate one of my Chrome extensions to manifest v3, and I'm having trouble with the page_action. In manifest v3, the page_action and browser_action are merged into action, which is all good, but it's not clear to me how I can get the behavior I had previously with the new APIs.
A bit of background; the extension in question is only supposed to run on one host (let's say https://example.com). As such, I want to grey out the icon on pages with a different host. It has a popup with some settings but the main functionality is inserted via a content script (this works).
The old extension using manifest v2 used
{
"manifest_version": 2,
"name": "...",
"description": "...",
"version": "...",
"permissions": ["declarativeContent", "storage", "https://example.com/", "tabs"],
"page_action": {
"default_icon": { ... },
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": { ... },
"content_scripts": [{
"js": ["content.js"],
"matches": ["https://example.com/*", "https://www.example.com/*"]
}]
}
and in background.js I used
chrome.runtime.onInstalled.addListener(function(){
const pageUrl = {hostEquals: 'www.example.com'};
const {
onPageChanged,
PageStateMatcher,
ShowPageAction
} = chrome.declarativeContent;
onPageChanged.removeRules(undefined, function(){
onPageChanged.addRules([{
conditions: [new PageStateMatcher({pageUrl})],
actions: [new ShowPageAction()]
}]);
});
});
this works fine and the icon gets greyed out except on https://example.com. When migrating, the manifest looks like
{
"manifest_version": 3,
"name": ...,
"description": ...,
"version": ...,
"permissions": ["storage", "tabs", "declarativeContent", "activeTab"],
"background": {"service_worker": "service-worker.js"},
"action": {
"default_icon": { ... },
"default_popup": "popup/index.html"
},
"icons": { ... },
"content_scripts": [{
"matches": ["*://*.example.com/*"],
"js": ["content/detect-theme.js"]
}]
}
I cannot seem to get this to work properly. I've tried adding host_permissions, removing the declarativeContent-related code (as it doesn't seem to affect the icon whatsoever) but the extension stays available on all hosts. I know I can use the chrome.action.enable and chrome.action.disable methods to simulate this behavior but it seems overkill for such a simple use-case.
Actually, the action being available even on other pages is not breaking by any means, but I would like to make it more clear to my users that the extension only does things on https://example.com and nowhere else. Perhaps this is not even the right approach; if it isn't, I accept that as an answer as well.
TLDR; how do I only enable the (page-)action on a specific host with manifest v3?
Had the same issue myself, and I just solved it!
I fixed it by disabling the extension in the handler before adding the activation rule. I've removed the actual handler for brevity.
chrome.runtime.onInstalled.addListener(() => {
chrome.action.disable(); // The important line!
// actual handler...
});
I would guess that ShowPageAction doesn't disable the extension by default anymore.
I am creating a chrome extension. Problem I am facing is I am able to see the html content but I am not seeing my js files included in content_scripts. I am checking this by inspecting on my extension & checking sources tab.
Mainfest -
{
"manifest_version": 2,
"name": "My Plugin",
"description": "some description",
"version": "1.0",
"browser_action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": ["myPopup.js"]
}
],
"permissions": [
"activeTab",
"declarativeContent",
"storage"
]
}
myPopup.js -
console.log("hello world")
What could I be doing wrong?
Source tab will display the scripts that are actually injected into page DOM.
If you are trying to debug the content script, then add a debugger to your content script.
Open the developer tools and reload the page, you should be able to see content script in the source tab.
enter image description here
I'm developing a chrome extension and I want to detect every time a user clicks the extension icon.
I used chrome.browserAction.onClicked.addListener(function(){console.log('icon clicked')}) but I get the message one time only, when I click second time, third time, ... I get nothing. I don't know where is the problem
Below a portions of code of the extension:
manifest.json
{
"manifest_version": 2,
"name": "My ext",
"version": "0.1",
"browser_action": {
"default_title": "My ext"
},
"permissions": [
"tabs", "<all_urls>"
],
"background":
{
"scripts": ["background.js"]
} }
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
console.log("icon clicked")
// do something
});
Chrome invalidate a valid manifest
While importing valid unpacked extension.
(manifest confirmed by https://manifest-validator.appspot.com/)
this error appears, and the extension do not get loaded.
Only one of 'browser_action', 'page_action', and 'app' can be
specified.
Manifest does not contain duplication of the neither mentioned in the error.
manifest.json
{
"applications": {
"gecko": {
"id": "addon#example.com",
"strict_min_version": "42.0"
}
},
"background": {
"scripts": ["jquery.js", "my-background.js"],
"page": "my-background.html"
},
"browser_action": {
"default_icon": "userInterface/browser_action_button/airplay_icon.svg",
"default_title": "LightDictionary",
"default_popup": "userInterface/browser_action_button/popup.html"
},
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+Y"
}
}
},
"content_security_policy": "script-src 'self' https://example.com; object-src 'self'",
"content_scripts": [
{
"exclude_matches": ["*://developer.mozilla.org/*"],
"matches": ["*://*.mozilla.org/*"],
"js": ["borderify.js"]
}
],
"default_locale": "en",
"description": "none",
"icons": {
"48": "userInterface/browser_action_button/airplay_icon.svg",
"96": "userInterface/browser_action_button/airplay_icon.svg"
},
"manifest_version": 2,
"name": "LightDictionary",
"page_action": {
"default_icon": {
"19": "userInterface/browser_action_button/airplay_icon.svg",
"38": "userInterface/browser_action_button/airplay_icon.svg"
},
"default_title": "LightDictionary",
"default_popup": "userInterface/browser_action_button/popup.html"
},
"permissions": ["webNavigation"],
"version": "0.1",
"web_accessible_resources": ["images/my-image.png"]
}
I have talked to Mozilla MDN maintainer on their IRC channel and I came to the conclusion, that the so called "cross-browser extension" manifest.json published on:
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json
Was incompatible with Chrome, and only works on the Firefox browser due to:
Chrome has strict check on the manifest, and the way Chrome handles manifest differs from the way Firefox does it. Chrome is slow to adopt technologies that are supported by the Firefox.
So, the only way to make the manifest cross-browser compatible: is
to take quick manifest.json example suggested by MDN
load it into Chrome (chrome://extensions, Turn on developer mode, Load Unpacked)
check the errors and remove what is asked by the chrome.
Things to keep in mind:
Chrome does not support .svg format icons, this leads to not showing specified icon. While Firefox does support it, it is suggestive to not use svg for a cross browser extension.
Futher comment to read: https://hacks.mozilla.org/2017/06/cross-browser-extensions-available-now-in-firefox/#comment-21268
You can only have one of the properties that it specifies in the error.
Only one of 'browser_action', 'page_action', and 'app' can be specified.
You have both a browser_action property & a page_action property in your json object.
Remove one of these from the object to fix it.