How do I remove an injected CSS file?

Question

I use chrome.tabs.insertCSS(null, {file: "style.css"}); to insert a css file into the page, and it works fine.

But is there a way to remove the file?
Also, if I inject another file named style.css, does it override the first one?
And by the way, where can I see the injected CSS files? Scripts can be viewed in "Sources/Content Scripts" (of chrome developer tools), but I cannot find the CSS files.

I had already asked your third question, about why injected CSS doesn't show up in dev tools [here](http://stackoverflow.com/questions/28402524/how-to-view-css-stylesheet-injected-by-a-google-chrome-extension-using-dev-tools?noredirect=1#comment45224324_28402524) when I came across this. Doesn't look like anyone's attempted to answer it here, so I'll leave mine as is. — foobarbecue, Feb 11 '15 at 15:09

score 11 · Accepted Answer · answered Aug 30 '13 at 15:56

I'm not sure what the context of this question is, but it sounds like maybe you want to highlight specific elements of the page a certain way and be able to toggle that custom highlight. (rather than styling elements your extension would create)

Since you can't actually remove the CSS file or just erase it by adding a file with the same name, I suggest the following:

wrap your custom styles in something like body.JMaylinCustomStyles
use JavaScript to add or remove the JMaylinCustomStyles class to the body element.
there is no step 3.

The benefits are that it doesn't add much work on top of what you have, that you don't have to figure out how to override your custom styles in a second stylesheet (it's always very annoying and error-prone) and that you even gain a bit in CSS specificity so your styles are more likely to be applied.

Note that the best way to "wrap" your styles would be to use Sass or LESS since you can literally just add body.JMaylinCustomStyles { at the top of the file and } at the bottom.

Thank you Timothée, I'm going to do that* – JMaylin Aug 31 '13 at 14:46 — JMaylin, Aug 31 '13 at 14:46
there is no step 3 – e382df99a7950919789725ceeec126 Mar 14 '22 at 17:59 — e382df99a7950919789725ceeec126, Mar 14 '22 at 17:59

score 8 · Answer 2 · answered Oct 01 '13 at 23:14

I've just come up against the same problem and thought I'd share my solution. I'm calling a content script that will then load or unload the css like so:

function loadCSS(file) {
  var link = document.createElement("link");
  link.href = chrome.extension.getURL(file + '.css');
  link.id = file;
  link.type = "text/css";
  link.rel = "stylesheet";
  document.getElementsByTagName("head")[0].appendChild(link);
}

function unloadCSS(file) {
  var cssNode = document.getElementById(file);
  cssNode && cssNode.parentNode.removeChild(cssNode);
}

The logic for which of those to call is also in the content script, based on data in chrome.storage. So all you need to do is inject the script and it will add/remove the css.

My case is actually a little more complex so I'm always loaded the content script and sending a message to it to load or unload the css. But this has the overhead of loading the file on every page load.

@JMaylin My pleasure. Finished extension is here, the code is raw so you should be able to unpack and inspect https://chrome.google.com/webstore/detail/skinny/lfohknefidgmanghfabkohkmlgbhmeho?utm_source=chrome-ntp-icon — David Gilbertson, Oct 03 '13 at 01:30
I like your extension, but we are competitors, here's one of my mine https://chrome.google.com/webstore/detail/read-fast-speed-reading-e/pnffahcjemjliibgcafjpklgmbeknldi :D — JMaylin, Oct 03 '13 at 07:33

score 2 · Answer 3 · answered Aug 30 '13 at 13:19

2

There is no API to remove the CSS file https://developer.chrome.com/extensions/tabs.html

Your best bet would probably insert another file that will replace all your CSS settings from the first file you inserted.

answered Aug 30 '13 at 13:19

Ryan Erb

828
1
8
28

1

When I try to inject an empty `style.css` it doesn't override the previous one – JMaylin Aug 30 '13 at 13:21
1

You might have to explicitly overwrite all your options. For example if you changed the background colour to blue, you would have to set it back to white. – Ryan Erb Aug 30 '13 at 13:23
That is an option. But in my case it doesn't work because I'm not supposed to know the default values. – JMaylin Aug 30 '13 at 13:26
1

An other option could be to save all the current CSS settings with Javascript and then set your new ones with Javascript as well. http://www.w3schools.com/jquery/jquery_css_classes.asp This would require a lot more code, but you have a lot more control. – Ryan Erb Aug 30 '13 at 13:38
Yes, I could do that if I don't find another solution. – JMaylin Aug 30 '13 at 14:12

How do I remove an injected CSS file?

3 Answers3

Linked