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
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 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 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 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.
made my first chorme ext. and it works fine on old comp.
now with new one try to load unpacked ext. and it don't works at all. i see my ext popup ad bg.html but content script didn't loads at all, neiter images that shold be on target page.
other unpacked ext works fine. but mine refuse works( help me please!
manifest.json:
{
"background_page": "bg.html",
"name": "lardi trans",
"version": "1.0",
"icons": {
"48": "icon_48.png"
},
"browser_action": {
"default_icon": "icon_48.png",
"default_title": "Lardi Trans",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"notifications",
"http://lardi-trans.com/gruz/*",
"http://lardi-trans.com/trans/*",
"unlimitedStorage"
],
"content_scripts": [{
"matches": [
"http://lardi-trans.com/gruz/*",
"http://lardi-trans.com/trans/*"
],
"css": ["extent_styles.css"],
"js": ["jq.js", "script.js"],
"run_at": "document_end"
}]
}
screenshots of page where ext should be i mark place where must appears my form
console shot
and other ext scripts loads like this ! screenshot2 (5 times same script? WTF??) but anyway i can't see my ext script.js (why it din't loads?)
You do not have to give the link of css to manifest.json file. Just, call it in bg.html
My manifest.json file
{
"name": "Example",
"version": "2.0",
"description": "Example.com Description",
"icons": { "16":"Images/Example/16x16.png", "32":"Images/Example/32x32.png", "48": "Images/Example/48x48.png", "64": "Images/Example/64x64.png", "128": "Images/Example/128x128.png" },
"app":
{
"default_icon": "../Images/Example/icon.png",
"launch":
{
"local_path": "Pages/Index.html"
}
},
"permissions": [ "http://www.Example.com/",
"http://*.Example.com/",
"https://www.Example.com/",
"https://*.Example.com/",
"unlimitedStorage",
"tabs",
"notifications"
],
"options_page": "Pages/Options.html",
"background_page": "Pages/Background.html"
}
If that answer helped you, please mark it as an answer...
If you are still taking errors, please ask them to bottom of that answer.
Best Regards.
EDIT:
View errors - Steps;
Click your extension button to open it.
Open the debug window in Google Chrome with F12 key.
Click "Console" tab page.
Take a screenshot of it, and post the picture in your question.
With that way everybody can help you =)
EDIT 2:
ok your question seems looking littlebit different now.
Here is algorithm;
Download the site sourcecode of target webpage with jquery,
Insert your css line in head tag with json,
Store new source code in localStorage( html5 )
When it's done, refresh the page with js, and read new source code from localStorage
And show it in html.
if anyone interests, problem solved, by some reason in manifest add unprop whitespases "content_scripts": [{
"matches": ["http://lardi-trans.com/gruz/*","http://lardi-trans.com/trans/*"],
this works!))