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/
Related
I've been learning how to make a Chrome extension and have been stuck on just adding an icon for a while now, I've copy pasted code that supposedly works but I keep getting this error:
Could not load icon 'icon16.png' specified in 'icons'.
Could not load manifest.
My code:
{
"manifest_version": 3,
"name": "extension",
"description": "test",
"version": "1.0",
"browser_action": {
"default_icon": "icon48.png"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"content_scripts": [
{
"js": [
"test.js"
],
"matches": [
"https://www.test.com/*"
]
}
]
}
I've triple checked that every image is in fact a PNG and is of the right size. I have a single directory with manifest.json, test.js, and all three images (as well as a.prettierrc file, although I doubt that has any impact).
If I remove the icons part of manifest.json the extension works perfectly.
The error about not being able to load the manifest is likely related to:
"browser_action": {
"default_icon": "icon48.png"
},
which is from Manifest Version 2. The "browser_action" field should be changed to:
"action": {
"default_icon": "icon48.png"
},
For further reference see here: Action API unification
I have created a Chrome extension and published it to the Chrome Web Store. I noticed with my initial version that when a user tried to install it they would get the warning that my extension could "read and change all your data on the websites you visit". I've changed and republished my extension so that I don't think that warning should be displayed, but it still gets displayed. Based on the information at https://developer.chrome.com/extensions/permission_warnings I don't think that message should be showing up. Below is what is in my manifest.json file. Any suggestions for how to make the warning go away?
{
"name": "Screen Recorder",
"description": "Record a video of your computer screen",
"version": "0.4",
"manifest_version": 2,
"icons": {
"16": "icon.png",
"128": "icon.png"
},
"background": {
"scripts": [
"background.js",
"ourrecorder.js"
]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "receiver.html"
},
"permissions": [
"desktopCapture",
"tabCapture",
"notifications",
"unlimitedStorage"
]
}
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 have a little problem whit my chrome extension.
The extension works if I'm on a URL that not uses fragment.
Now sure on how to configure it.
Im trying with definition < all_urls > but as I wrote. it does not work on pages with fragment.
manifest.json
{
"update_url": "https://clients2.google.com/service/update2/crx",
"name": "Analytic Live Alarm",
"version": "0.3",
"description": "Felipe the solution provider",
"permissions": [
"tabs","<all_urls>"
],
"browser_action": {
"default_icon": "icon.png"
},
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon_128.png"
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"run_at": "document_end" ,
"js": ["jquery.min.js", "script.js"]
}
],
"manifest_version":2
}
This is the url Im using.
https://www.google.com/analytics/web/#dashboard/6I8yfVs_TqSQ_b1tOJYR0Q/a8398197w15972131p74378741/
Any ideas?
Thanks
Taking into account your previous question..
It's not "not working", it's working once; then, as you navigate, the page is not really reloaded, and your script does not run again.
Instead of coloring all elements at document_end, you need to detect new elements that match your selector and re-apply your styles.
This question should help you get started, or better yet mutation-summary library.
I am using Chrome 21. Everything is working fine but I am getting this warning message -
"Support for manifest version 1 is being phased out. Please upgrade to version 2.". If I am updating manifest version 2 my script.js is not working. I am getting wrong result for my plugin. How to solve this problem ? Could somebody please help me out..
MANIFEST FILE:
{
"name": "Email_Extension",
"version": "1.0",
"manifest_version": 1,
"icons": {
"16": "EOE(16x16).png",
"48": "EOE(48x48).png",
"128": "EOE(128x128).png"
},
"description": "Eyes On Emails New",
"permissions": [
"http://api.eyesonemails.com/","http://192.168.0.197/","http://www.sagaciousinfosystems.com/","tabs"
],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css": ["style.css"],
"js": ["jQuery 1.7.1.js","script.js"]
}
],
"background": {
"page": "background.html"
},
"browser_action": {
"default_title": "Eyes on Emails",
"default_icon": "EOE(48x48).png"
},
"web_accessible_resources": [
"images/loader.gif",
"images/email-wrong.png",
"images/email-correct.png",
"images/eye-icon.png"
],
"options_page": "options.html"
}
Please refer to "Changes between version 1 and 2" section of this documentation page. All necessary changes you'll have to make in your extension are described there.
"manifest_version" should be assigned to 2, your mainfest.json should appear like that
{
"name": "Email_Extension",
"version": "1.0",
"manifest_version": 2,
...
}
check the documentation for chrome extension upgrade.