I'm having with getting the correct icons to show in my chrome extension.
To make some tests I'm using the following icon pack where each icon is just a number displaying the size of the icon (i've added a 32 version as well):
https://github.com/jbrudvik/chrome-extension-icon-sizes
I then set my manifest like so:
"browser_action": {
"default_icon": {
"16": "img/icon16.png",
"19": "img/icon19.png",
"24": "img/icon24.png",
"32": "img/icon32.png"
"38": "img/icon38.png",
"48": "img/icon48.png"
},
},
"icons": {
"16": "img/icon16.png",
"19": "img/icon19.png",
"24": "img/icon24.png",
"32": "img/icon32.png",
"38": "img/icon38.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
What this shows me is that on my mac, under chrome v67:
- The favicon on a tab belonging to the extension uses: 32x32
- The extensions management page uses: 48x48
- The browser action icon uses: 32x32
Google gives some hints as to which sizes get used in which locations:
https://developer.chrome.com/apps/manifest/icons
I have three questions:
Google states that the extensions management page uses the 48x48. However, this does not seem to be the ideal choice for this, as it tends to upscale the image making it look rather blurry. I've found if I remove the 48x48 option from my manifest, or alternatively, provide a 128x128 img for 48x48 option (ie: "48": "img/icon128.png",) then this results in a nice clear image. Why doesn't the extensions management page default to using the 128x128 image first? Are there any downsides to my hack of providing at 128x128 image as the defined 48x48 one?
Google also states that you can provide a 16x16 icon which will "be used as the favicon for an extension's pages". This contradicts my findings where it actually uses the 32x32 as it's preferred size (falling back on 48x48 if unavailable, and then 128x128).
Finally, I haven't tested this, but I suspect these findings may be specific to my computer / operating system. Is it possible that other systems may exhibit different behaviour?
Related
The kinda "puzzle piece" icon of Chrome that shows a list of extension as a popup is shown in the image i have attached. Next to each extension name is an icon. How do you add this icon to an extension or what image name or size is this in the manifest?
Update my default icon in the manifest looks like this.
"browser_action": {
"default_icon": {
"16": "img/icon16.png",
"24": "img/icon24.png",
"32": "img/icon32.png"
},
"default_title": "__MSG_mainDescription__"
}
Update This is now almost a stupid question. My icon color is almost the same color as the window and thus you cannot see it. This was the problem.
I've created a simple extension but the icon is not being displayed in the browser's toolbar and in fact I see many other extensions installed but not their icon in the toolbar. What element in the manifest file defines that an icon should display an icon in the toolbar?
Here is the used manifest file and this manifest does not add any icon to the toolbar
{
// Extension ID: my_id
"key": ".....my key.......",
"name": "....any name....",
"version": "1.0",
"manifest_version": 2,
"description": "description",
"app": {
"launch": {
"local_path": "main.html"
}
},
"icons": {
"128": "icon-128.png"
},
"permissions": [
"...."
]
}
I ran into this exact same problem and found this question on the top search results. The answer I needed is in the comment by wOxxOm on this question so in case it helps, I'm promoting it to an answer:
The icon is available by default but it may not be visible due to the toolbar width made available to icons. You can edit this by clicking on the "puzzle piece" in the extension toolbar and then picking on the "pushpin" next to the extension you want to be made visible.
Hope this helps other people who are confused by this.
Sometimes, although adding icons in manifest.json, you cannot view icon on the toolbar. Because you need a browser action.
You can try adding in this manifest.json;
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
Also, you should generated .html file and .png image
In Brief,
Chrome extension include third parts.
Background script
Content script
Browser action(popup)
If you want see icon on toolbar, you should set a browser action in manifest.json
I added icons for all of the sizes below to the "icons" and "browser action icons" properties to see where Chrome would put them.
"16": "icon16.png",
"19": "icon19.png",
"24": "icon24.png",
"32": "icon32.png",
"36": "icon36.png",
"38": "icon38.png",
"48": "icon48.png",
"128": "icon128.png"
https://developer.chrome.com/extensions/manifest/icons
According to the documentation for icons: "You should always provide a 128x128 icon; it's used during installation and by the Chrome Web Store. Extensions should also provide a 48x48 icon, which is used in the extensions management page (chrome://extensions). You can also specify a 16x16 icon to be used as the favicon for an extension's pages."
https://developer.chrome.com/extensions/browserAction
According to the documentation for browser icons:
"browser_action": {
"default_icon": { // optional
"16": "images/icon16.png", // optional
"24": "images/icon24.png", // optional
"32": "images/icon32.png" // optional
}
What I found is that the actual sizes on the screen are different from the dimensions of the image and the CSS size given to the image. For example, the 48x48 image used in chrome://extensions/ is displayed on the browser as 54x54 (checked size using MS Paint), but inspecting it with dev tools shows a 36x36 css value. So 48x48 = actual size, 54x54 size displayed in the browser, 36x36 CSS size given to it in the browser.
Something else I found is that, for example, the navicon icon uses the 32x32 image. Yet the space on screen is 24x24 (checked in MS Paint). Why not just use the 24x24 image I included?
Why these discrepansies?
And when I checked an official Google extension, the only icons it has are 128, 38, and 19. There's no 32x32 even though the docs say 32x32 should be included for Windows. This page does mention those sizes: https://chrome-apps-doc2.appspot.com/extensions/browserAction.html#icon, but it seems like an old page.
The docs say Chrome can rescale an icon to fit it to different sizes. So could I just give it a 128x128 one and be good? It displays well on my laptop but I don't know if other devices would have issues.
Inside of my Chrome extension's content script, I'm trying to modify the favicon of the site to (temporarily) set it to my extension's icon. I can't figure out the correct way to reference the extension's icons from within the content script, however. I've tried:
favicon.href ='/images/icon-38.png';
console.log("set href of favicon to " +favicon.href);
But the value of favicon.href ends up relative to whatever site I'm on, for example: set href of favicon to https://twitter.com/images/icon-38.png
From my manifest.json:
"icons": {
"16": "images/icon-16.png",
"38": "images/icon-38.png"
},
Within my background script, I can of course refer to my icons with their relative path... but how do I do it from the content script?
You need to specify the icons as web_accessible_resources:
"icons": {
"16": "images/icon-16.png",
"38": "images/icon-38.png"
},
"web_accessible_resources": [
"images/icon-16.png",
"images/icon-38.png"
],
And then use chrome.runtime.getURL (chrome.extension.getURL is deprecated since Chrome 58)
chrome.runtime.getURL('images/icon-16.png');
chrome.runtime.getURL('images/icon-38.png');
This should work for you
chrome.extension.getURL('images/icon-38.png')
This page explain 19*19 and 38*38.
http://developer.chrome.com/extensions/browserAction.html#icon
But this page explain 16*16 and 48*48, 128*128.
http://developer.chrome.com/extensions/manifest/icons.html
Which is correct?
Both are correct ! They are for different sections/features:
The former refers to the browser-action icon (displayed on the top-right corner of your browser-window, next to the address bar). It is only displayed if your extension registers a browser-action.
The latter refers to icons used throughout the extension and browser, as is explained quite clearly in the link you provide:
(emphasis mine)
One or more icons that represent the extension, app, or theme. You should always provide a 128x128 icon; it's used during installation and by the Chrome Web Store. Extensions should also provide a 48x48 icon, which is used in the extensions management page (chrome://extensions). You can also specify a 16x16 icon to be used as the favicon for an extension's pages. The 16x16 icon is also displayed in the experimental extension infobar feature.
BTW, that second link mentions icon as the property name, which was replaced in Manifest v2 by default_icon.
("Migration to Manifest v2" guide)
To elaborate on ExpertSystem's answer, here is an example manifest excerpt with all of the image sizes:
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_popup": "popup.html"
},
"icons": { "16": "images/icon16.png",
"48": "images/icon48.png",
"128": "images/icon128.png" }, ...
Notice how the 19/38 icons are for the browser action, and the 16/48/128 are at the icons level.
I think it is best therefore to create the image as a vector graphic (e.g. svg file) and then save to a bitmap (e.g. png file) for each of the sizes.
2020 Update:
I was researching this recently. Here is what I found:
These sizes seem to cover most scenarios: 16, 24, 32, 48, 128
These sizes seem to be outdated: 19, 38
Icons - Recommended Sizes:
16, 24, 32, 48, 128.
Size: Manifest - Icons: chrome.browserAction:
16 Yes Yes
24 No Yes
32 Yes Yes
48 Yes No
128 Yes No
Manifest - Icons: https://developer.chrome.com/extensions/manifest/icons
chrome.browserAction: https://developer.chrome.com/extensions/browserAction
Icons - Outdated Sizes:
19, 38.
Size: Manifest - Icons: chrome.browserAction:
19 No Outdated
38 No Outdated
chrome.browserAction: https://chrome-apps-doc2.appspot.com/extensions/browserAction.html
For browser action, we just need a 16x16 icon now, as
The browser action icons in Chrome are 16 dips (device-independent pixels) wide and high.