Dynamically change icon

How can I achieve this?

17 Replies

Deavial•12mo ago

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•12mo 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•12mo ago

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

IsraOP•12mo ago

Deavial•12mo ago

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

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

Arcane•12mo ago

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

IsraOP•12mo ago

That didn't work either

Arcane•12mo ago

@Isra has reached level 1. GG!

Deavial•12mo ago

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

IsraOP•12mo ago

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

IsraOP•12mo ago

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

Deavial•12mo 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•12mo ago

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

IsraOP•12mo ago

I've tried your example

Deavial•12mo ago

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

IsraOP•12mo ago

Weird, it doesn't show up at all

IsraOP•12mo 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

Did you find this page helpful?