Dynamically change icon

How can I achieve this?

17 Replies

from the background script:

(browser?.action ?? chrome?.action)?.setIcon({
     path: {
          16: 'myIcon_16x16.png',
          32: 'myIcon_32x32.png'
     }
})

(browser?.action ?? chrome?.action)?.setIcon({
     path: {
          16: 'myIcon_16x16.png',
          32: 'myIcon_32x32.png'
     }
})

or if only one size icon

(browser?.action ?? chrome?.action)?.setIcon({
     path:  'myIcon_32x32.png'
})

(browser?.action ?? chrome?.action)?.setIcon({
     path:  'myIcon_32x32.png'
})

IsraOP•11mo ago

Thank you for your help! Unfortunately, I'm having issues getting the right path. Here is what my workspace looks like: I have tried the following examples, but all ceased to work with an error similar to the one I attached:

//1
import greyScaledIcon from 'url:../assets/iconGreyscale.png';
chrome.action.setIcon({
  path: greyScaledIcon.toString(),
});
//2
chrome.action.setIcon({
  path: 'greyScaledIcon.png'
});
//3
chrome.action.setIcon({
  path: './assets/greyScaledIcon.png'
});

//1
import greyScaledIcon from 'url:../assets/iconGreyscale.png';
chrome.action.setIcon({
  path: greyScaledIcon.toString(),
});
//2
chrome.action.setIcon({
  path: 'greyScaledIcon.png'
});
//3
chrome.action.setIcon({
  path: './assets/greyScaledIcon.png'
});

YAGPDB.xyz•11mo ago

Gave +1 Rep to @𝕯èส𝓿ḯส𝕝 (current: #25 - 1)

IsraOP•11mo ago

𝕯èส𝓿ḯส𝕝•11mo ago

chrome.action.setIcon({
  path: 'assets/greyScaledIcon.png'
});

chrome.action.setIcon({
  path: 'assets/greyScaledIcon.png'
});

Arcane•11mo ago

@𝕯èส𝓿ḯส𝕝 has reached level 2. GG!

IsraOP•11mo ago

That didn't work either

Arcane•11mo ago

@Isra has reached level 1. GG!

𝕯èส𝓿ḯส𝕝•11mo ago

it would be just the directory in the extension and the file. the same way it would look in the manifest

IsraOP•11mo ago

That wouldn't work because it's not using the compiled url

IsraOP•11mo ago

Btw, I was following this example https://github.com/PlasmoHQ/plasmo/issues/57

𝕯èส𝓿ḯส𝕝•11mo ago

this is what mine looks like:

crx.action.setIcon({ 
  tabId, 
  path: {
      '16': 'assets/[email protected]',
      '32': 'assets/[email protected]',
      '48': 'assets/[email protected]',
      '64': 'assets/[email protected]',
      '128': 'assets/[email protected]'
  }
);

crx.action.setIcon({ 
  tabId, 
  path: {
      '16': 'assets/[email protected]',
      '32': 'assets/[email protected]',
      '48': 'assets/[email protected]',
      '64': 'assets/[email protected]',
      '128': 'assets/[email protected]'
  }
);

my crx is a universal definition of const crx = browser?.action ? browser : chrome; i include a tabId because I am only changing the icon for that tab my images didn't need to be put in the manifest because they are not being "downloaded" by a webpage. they are only overriding the icon declaration in the manifest

I am only setting this from the background script

you can't use a compiled url. the image must be a file path string not a url

IsraOP•11mo ago

Either way I do it it's giving me this error

IsraOP•11mo ago

I've tried your example

𝕯èส𝓿ḯส𝕝•11mo ago

in your build/<browser> directory, what path is the file showing in

IsraOP•11mo ago

Weird, it doesn't show up at all

IsraOP•11mo ago

When I include an import like this it shows up though.

import 'url:../assets/iconGreyscale.png';

import 'url:../assets/iconGreyscale.png';

Gaming

Programming

Dynamically change icon