Enable/Disable "content_scripts.css" in Chrome Extension

Question

For example:

  ...
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "css": ["style.css"]
    }
  ]
  ...

I would like to inject this stylesheet by default. Which is business as usual.

I would also like to enable/disable, when the user when the user clicks on the icon in the toolbar.

Any pointer would be helpful. Thanks!

Answer 1

I had to implement this in one of my extensions as well. I used a checkbox in my popup.html to manipulate chrome.storage, which would store whether the state was enabled or disabled.

The content script was always running, but would check chrome.storage first before performing any actions. Feel free to refer to my repository here, particularly inject.js.

This isn't the only way to do it, but it was pretty simple for me to implement. Note that you can't use localstorage because the content script exists in a separate environment.