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!
Related
I have this piece of code in my manifest:
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_icon": {
"16": "images/16x16.png",
"48": "images/48x48.png",
"128": "images/128x128.png"
}
},
It was working fine until today and now I am getting a 'duplicate key' error.
I know there are two entries for default_icon -- one for the old way of declaring a single icon, and the new way for declaring for specific sizes -- however it was not causing an issue when uploading the new packages until now. Did something change?
If I remove the first declaration, what that cause any issues?
Update:
I'm now getting an error where I can upload the zip file now, but publishing fails with 'Internal Publish Error'. When I first upload the zip, I did get a warning 'Invalid Manifest Content' but no other details. All of this was working until recently. Here is my manifest:
{
"web_accessible_resources": [
"files/*",
"js/languages.json"
],
"name": "Workspace Manager",
"version": "0.962",
"manifest_version": 2,
"short_name": "Workspace Tab Manager extension.",
"description": "Tab Manager and Productivity Extension - save tabs as workspaces and revisit them in the future",
"icons": {
"16": "images/16x16.png",
"48": "images/48x48.png",
"128": "images/128x128.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"browser_action": {
"default_icon": {
"16": "images/16x16.png",
"48": "images/48x48.png",
"128": "images/128x128.png"
},
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"storage"
],
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://ssl.google-analytics.com https://www.googletagmanager.com; object-src 'self'"
}
It turns out that duplicate keys are no longer allowed. And to fix it, you not only need to delete one of the duplicates (as I did), but you need to unpublish your extension entirely and then republish.
It wasn't clear on what would happen when unpublishing. Essentially, you extension will disappear from the Webstore and when you republish, it takes longer than usual to review it. (it took about 2 days vs the normal couple hours). In that time it will say 'pending' but when it does get approved, everything in your store will be restored and it will be as though nothing happened.
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.
I have used the "Microsoft Edge Extension Toolkit" (https://www.microsoft.com/en-us/store/p/microsoft-edge-extension-toolkit/9nblggh4txvb) to convert the chrome extension code to be compatible with MS Edge browser.
Enabled the "Developer Settings" from "about:flags" and loaded the newly converted code.
Everything works well except the icon in the toolbar. Its a "browserAction" (https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/api-support/supported-APIs/) button .
It is showing the default icon by the browser even after trying out a lot of icons but no luck.
Does anyone have any idea about any option though which the icon can be set or the image type required.
Tried installing other extensions and their icon is clearly visible.
Any ideas?
Edit:
Here is the manifest.json file content: The contents are not changed after conversion.
{
"manifest_version": 2,
"name": "............",
"description": "............",
"version": "1.0",
"author": "............",
"browser_action": {
"default_icon": {
"16": "data/images/icon-16.png",
"32": "data/images/icon-32.png",
"48": "data/images/icon-48.png",
"64": "data/images/icon-64.png",
"128": "data/images/icon-128.png"
},
"default_title": "............"
},
"icons": {
"16": "data/images/icon-16.png",
"32": "data/images/icon-32.png",
"48": "data/images/icon-48.png",
"64": "data/images/icon-64.png",
"128": "data/images/icon-128.png"
},
"background": {
"scripts":[
"background.js"
],
"persistent": false
},
"content_scripts": [
{
"run_at": "document_end",
"matches": ["http://*/*", "https://*/*"],
"css": [
"data/css/style.css"
],
"js": [
"data/js/script.js"
]
}
],
"permissions": [
"tabs",
"activeTab",
"contextMenus",
"http://*/*",
"https://*/*"
],
"web_accessible_resources": [
"data/images/icon-16.png",
"data/images/icon-32.png",
"data/images/icon-48.png",
"data/images/icon-64.png",
"data/images/icon-128.png"
]
}
To add more to this, the icons are properly scaled to the sizes mentioned in the file.
I got lucky with a sample extension code that I found after a long time that actually worked.
The manifest.json file had this one setting:
"browser_action": {
"default_icon": {
"20": "data/images/icon-20.png"
},
"default_title": "................"
},
In other browsers the image size of 16, 24, 32, 48 and 128 works well but this particular browser requires a 20x20 size, surprisingly.
Hope this helps someone.
browser_action Microsoft Edge does not support the following syntax: browser_action : {"default_icon" : "icon.png" }
Size for icons must be specified.
Preferred sizes: 20px, 25px, 30px, 40px.
Other supported sizes: 19px, 35px, 38px.
Here's the documentation https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/api-support/supported-manifest-keys/
I just create my first Chrome extension. My extension's icon shows correctly (with color) in the extension manager page:
But Chrome shows a grayscale version of my icon in the extension bar:
Here's the manifest of my extension:
{
"name": "__MSG_appName__",
"version": "0.0.1",
"manifest_version": 2,
"description": "__MSG_appDescription__",
"icons": {
"16": "images/icon-16.png",
"128": "images/icon-128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"scripts/chromereload.js",
"scripts/background.js"
]
},
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"contentSettings"
],
"content_scripts": [
{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"scripts/contentscript.js"
],
"run_at": "document_end",
"all_frames": false
}
]
}
What can I do to make Chrome show my icon with color next to the address bar?
Thanks
That is odd behaviour, I don't know why it's happening but I know the solution: you should be using default_icon instead of icon:
"browser_action": {
"default_icon": "icon.png"
}
Note that the icon needs to be 19x19 or 38x38 pixels.
You've defined the larger icon correctly though so you could leave that as is.
See here for more info.
Based on my experience and on Noam's answer I'm tempted to say that it is because your extension doesn't have a "browser_action" defined. In other words: its icon is there to show it is installed, but it doesn't do anything, so it had its colors removed.
This is just a guess not confirmed by any documentation or test.
The other responses are working, but only for manifest_version <= 2. for version 3, instead of browser_action just action. for more details on other keywords check here
i am facing an odd problem when i try to publish my chrome extension via the web store. Every time i upload the zip file i get this error:
An error has occurred: Can not contain the access permissions to the file.
I even tried to upload a zip file that contains only the manifest file but i am still having the same error.
Any idea ?
Thanks
Manifest file :
{
"name": "__MSG_plugin_name__",
"version": "0.0.0.1",
"manifest_version": 2,
"description": "__MSG_plugin_description__",
"browser_action": {
"default_icon": "images/ST_19.png",
"default_title": "__MSG_plugin_title__",
"default_popup": "popup.html"
},
"icons":{
"16": "images/ST_16.png",
"48": "images/ST_48_1.png",
"128": "images/ST_128.png"
},
"default_locale": "en",
"permissions": [
"contextMenus",
"tabs", "http://*/*", "file:///*","https://*/*", "ftp://*/*"
],
"background": {
"persistent": false,
"scripts": ["scripts/jquery.min.js","scripts/utils.js", "scripts/menus.js","scripts/logic.js"]
}
}
So i isolated the thing: ""file:///*"" was wrong and since i want the extension to run on any opened url, i used "" as a permission.
Change in the manifest file is :
"permissions": [
"contextMenus",
"tabs", "<all_urls>"
]
Thanks everybody
Yes, ndongo is correct and Chrome is complaining that it does not have a domain or path (just like the other protocols).
The way you must write your URLs must be protocol://domain/path (note you can use * or ?)
So you can replace "file:///*" with "file:///*/*" or use "<all_urls>"