Toggle the extension icon depending on the system theme mode (dark/light)

[Rail Batyrshin]

Hello. Can anyone help me with my problem

I'm trying to change the extension icon depending on the OS theme via manifest. I wrote the code as it advised here: https://stackoverflow.com/questions/58880234/toggle-chrome-extension-icon-based-on-light-or-dark-mode-browser

But I'm getting an error: Error: Could not load javascript 'toggleIcon.js' for content script. Could not load manifest - in my browser

I created the toggleIcon.js file, and added in the manifest configuration file (it's not the JSON format)

content_scripts: [

{

matches: ['http://*/*', 'https://*/*', '<all_urls>'],

js: ['./content/index.global.js', 'toggleIcon.js']

}

]

I'll be kind of any advices!

[Deco]

See jdunning's comment on the thread: https://stackoverflow.com/questions/58880234/toggle-chrome-extension-icon-based-on-light-or-dark-mode-browser#comment105834368_58882519

Cheers,

Deco

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/a961397c-62fa-4066-82f4-d0d731aa46c2n%40chromium.org.

[Deco]

Edit: I didn't see the post had be edited to take account for the suggestion. Due to how old the thread is, it's possible it won't work due to Manifest V3.

Here's an alternative implementation method:
In your manifest.json, you can use the theme: property.
Specify the icons as 2 separate icon sets and specify them under "icons" in your manifest (e.g.):
icon-light-16.png, icon-light-48.png, icon-light-128.png for the light mode icons.
icon-dark-16.png, icon-dark-48.png, icon-dark-128.png for the dark mode icons.

From there, for MV3 you can update the icon dynamically using chrome.action.setIcon, with a sample implementation such as:
chrome.action.setIcon({
  path: {
    "16": {
      light: "icon-light-16.png",
      dark: "icon-dark-16.png"
    },
    "48": {
      light: "icon-light-48.png",
      dark: "icon-dark-48.png"
    },
    "128": {
      light: "icon-light-128.png",
      dark: "icon-dark-128.png"
    }
  }
});
From there, you can use a addListener, but slightly different (see the Action documentation from before):
chrome.action.onThemeChanged.addListener(({ theme }) => {
  chrome.action.setIcon({
    path: {
      "16": {
        light: "icon-light-16.png",
        dark: "icon-dark-16.png"
      },
      "48": {
        light: "icon-light-48.png",
        dark: "icon-dark-48.png"
      },
      "128": {
        light: "icon-light-128.png",
        dark: "icon-dark-128.png"
      }
    }
  });
});

This should work for what you're trying to do.

Cheers,
Deco

--

[Jackie Han]

Error: Could not load javascript 'toggleIcon.js' for content script. Could not load manifest

This error indicates your manifest and/or content scripts are not correct. You should be able to solve the problem quickly by yourself. Note that the example in Stackoverflow is based on MV2.

In MV3, you can use `matchMedia('(prefers-color-scheme: dark)').addListener(...)` in offscreen doc instead of content scripts. But either method is not ideal.

Supporting light and dark icons is very fundamental. But browsers don't support it yet. You can follow this issue: https://github.com/w3c/webextensions/issues/229 . Currently, Firefox is trying to solve it, Chrome may follow up in the future.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/CABcX4UdVrknr2%3DiNVxg1yDiJ9%2B_PfkVs9a7N_U1D8u-zUxEKcg%40mail.gmail.com.