How to dynamically set icons

[marcellino-ornelas]

Hello 👋🏽 Have some questions for ya'll around dynamically setting icons 🙏🏽

Context

Im trying to change my extension icon when a user is not logged in so its a indication to them they need to log in. Im also using https://wxt.dev/auto-icons for my icons

Question

• If https://wxt.dev/auto-icons is creating multiple versions of my icon, does that mean I need to do the same for my login icon? 🤔
  • if so can I use https://wxt.dev/auto-icons for this?
• Where should these new icons be placed in the directory structure? (E.g: assets or public?)
• How would I change my icon back once the user is logged in?

[alexdymov]

As far as I've discovered, browsers use a 48px icon for the action icon.
Once you have it auto-icon'ed, you can access it by the /icons/48.png path with the following call:

chrome.action.setIcon({ path: '/icons/48.png' });

Each other icon could be placed in the public dir, e.g. public/images/logged-out.png, then the following code will change the action button icon:

chrome.action.setIcon({ path: '/images/logged-out.png' });

[marcellino-ornelas]

Sweet thank you 🙏🏽 Will try this out and let you know how it goes 🙌🏽

[marcellino-ornelas]

This was perfect thank you @alexdymov. The only thing I had troubles with was resetting the icon back. I tried the 48 png but I think it depends on the size it needs at that time so what I ended up doing was storing a mapping of all the icons to the respective size

const ICONS = {
    16: `/icons/16.png`,
    32: `/icons/32.png`,
    48: `/icons/48.png`,
    128: `/icons/128.png`,
};

then used that mapping when resetting the icon:

await browser.action.setIcon({
    path: ICONS,
});