3

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!

Sarbbottam
  • 5,410
  • 4
  • 30
  • 41
  • 1
    See https://stackoverflow.com/questions/26667112/optionally-inject-content-script/26677279 – Rob W Jun 21 '16 at 14:18

2 Answers2

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.

Noam Hacker
  • 4,671
  • 7
  • 34
  • 55
  • 2
    Thanks! Though it didn't answer my question completely, it did made me aware of `chrome.storage`. And I solved it in my way utilizing `chrome.storage`, `browserAction`, `executeScript`. Accepted the answer. :) You can see my implementation at [focus-indicator](https://github.com/sarbbottam/focus-indicator/tree/master/src/js). – Sarbbottam Jun 22 '16 at 04:43
  • Glad I could help and thanks for adding details of your implementation :) – Noam Hacker Jun 22 '16 at 04:45
0

This is my workaround.

manifest.json

...
"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["content_script.js"]
  }
],
"web_accessible_resources": [
  "my_style.css"
]
...

content_script.js

const target = document.head || document.documentElement;

const link  = document.createElement('link');
link.id = 'my_style_css';
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = chrome.runtime.getURL('my_style.css');

target.appendChild(link);

to disable

link.disabled = true;

//or

document.getElementById('my_style_css').disabled = true;
happynow
  • 11
  • 1