Dynamically change icon

How can I achieve this?

𝕯èส𝓿ḯส𝕝•102d 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'
})

Isra•102d 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•102d ago

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

Isra•102d ago

𝕯èส𝓿ḯส𝕝•102d ago

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

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

Arcane•102d ago

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

Isra•102d ago

That didn't work either

Arcane•102d ago

@Isra has reached level 1. GG!

𝕯èส𝓿ḯส𝕝•102d ago

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

Isra•102d ago

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

Isra•102d ago

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

𝕯èส𝓿ḯส𝕝•102d ago

this is what mine looks like:

crx.action.setIcon({ 
  tabId, 
  path: {
      '16': 'assets/online@16.png',
      '32': 'assets/online@32.png',
      '48': 'assets/online@48.png',
      '64': 'assets/online@64.png',
      '128': 'assets/online@128.png'
  }
);

crx.action.setIcon({ 
  tabId, 
  path: {
      '16': 'assets/online@16.png',
      '32': 'assets/online@32.png',
      '48': 'assets/online@48.png',
      '64': 'assets/online@64.png',
      '128': 'assets/online@128.png'
  }
);

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

Isra•102d ago

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

Isra•102d ago

I've tried your example

𝕯èส𝓿ḯส𝕝•102d ago

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

Isra•102d ago

Weird, it doesn't show up at all

Isra•102d ago

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

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

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

🧩 Plasmo Developers Join

2.1KMembers

View on Discord

Want results from more Discord servers?

Add your server

Style / Font consistency between content scriptsHey! I'm wondering if anyone else has ran into issues with content script's styling and fonts being Build fails after changing TS path aliasI changed the default path alias from `"~*": ["./src/*"]` to `"~/*": ["./src/*"]` and updated all im Disable content-ui per siteHi, I'm developing pretty advanced extension and got a request for option to disable/enable the exte Plasmo Injected CSUI disappears on ClickI have a plasmo extension where i am injecting a component ui using conten script and i am making it Welp guess it's dead xdWelp guess it's dead xd @Pallas#2819 What are the differences@Pallas What are the differences between the dev end build versions of the extension ? The same code Building a standalone EmbedHey everyone! I have an extension I've been building with Plasmo for work and we were asked to also How to install a npm package?I'm trying to build a chrome extension by using Plasmo, after initialize a project, and I installed Extension Network QuestionCan a fetch in extension ( CSUI React) handled by website's service worker ?How to include JSON file referenced in manifest (Failed to resolve file.json)I'm trying to setup "declarative_net_request" in the manifest. However whenever i include the resour CSUI Best practices questionCan I get some advice on what is the best way for me to append a new button shown in the screenshots CSUI Best practices questionCan I get some advice on what is the best way for me to append a new button shown in the screenshots Trigger content scripts from background.ts?Hello everyone, I have some content scripts like that. I want to trigger on of them to re-run from b Plasmo setup with NX consoleHello everyone, I'm trying to create an extension app inside my nx monorepo and really would love to Is it possible to wrap page elements in the document root?Context is that i'm trying to use MUI tabs to add additional content with the page document as the f Performance implications of multiple content script and one redux storeHey, I'm wondering if someone has tested if the shared Redux store across multiple content scripts w Cross browser extensionI have build the extension using the plasmo and its working on the chrome. I have generated the buil Opening Modal in the Center of the screen when clicked a button inside pop-up of plasmo frameworki have created a chrome extension using plasmo framework and i have a button onClick of which i want Content script not executingHello everyone, I was going though the docs and the getting started section. I'm trying to load a co How can I create a pop-up dialog that triggers when a selectionchange event is triggered?I've checked this doc https://docs.plasmo.com/framework/content-scripts-ui/life-cycle#renderer, but

Gaming

Programming

Dynamically change icon