Hi all. I’m brand new to Extension development and I’m trying to get some of the foundational steps clarified.
What is the canonical way to set an Extension icon?
I want to use two SVG’s as icon - one each for light/dark theme. But according to the specifications there are multiple ways to set an icon and while I feel I’ve tried a lot of ways, the icon does not always show up.
I found this old thread but frankly, it just confuses me even more.
My icon shows up in the Extension list page but not in the Extensions pop-out, as shown in the screenshots below:
In my manifest.json I have defined the icon as many places as I’ve seen the various documentation, using "manifest_version": 3
.
{
"manifest_version": 3,
"icons": {
"16": "icons/icon_dark.svg",
"32": "icons/icon_dark.svg",
"48": "icons/icon_dark.svg",
"64": "icons/icon_dark.svg",
"96": "icons/icon_dark.svg",
"128": "icons/icon_dark.svg"
},
"action": {
"browser_style": true,
"default_icon": {
"16": "icons/icon_dark.svg",
"32": "icons/icon_dark.svg",
"48": "icons/icon_dark.svg",
"64": "icons/icon_dark.svg",
"96": "icons/icon_dark.svg",
"128": "icons/icon_dark.svg"
},
"theme_icons": [{
"dark": "icon_dark.svg",
"light": "icon_light.svg",
"size": 64
}, {
"dark": "icon_dark.svg",
"light": "icon_light.svg",
"size": 48
}, {
"dark": "icon_dark.svg",
"light": "icon_light.svg",
"size": 32
}, {
"dark": "icon_dark.svg",
"light": "icon_light.svg",
"size": 16
}]
}
}
JSON is simplified for brevity.
My SVG icon has a viewBox that correspond to the coordinate system used in the SVG and I have experimented with setting the width
/height
attributes but they do not seem to make any difference. The only difference between icon_dark.svg and icon_light.svg is the fill
attribute color on the two paths in the SVG.
What is the canonical way to set an Extension icon?
I am thinking that it is way overkill to have this many ways to set an icon but I also understand how tech debt works and that it is probably for backwards compatibility.
Thanks in advance for clarification!
Cheers, Jon
Firefox: 109.0b9 (64-bit)