Injected <style> is ignored?

(my apologies if this ends up as a cross-post. I first posted to dev-addons, and then was told to post here)

I’m trying to port a Chrome extension to Firefox.

My extension initially loads a CSS file (using a ‘css’ entry in the ‘content_scripts’ part of the manifest). It later overrides that CSS using a new injected <style> (by appending a <style> tag to <head>). This all works fine in Chrome (and also on Firefox when I load my script via Tampermonkey), but when I load my Chrome extension into Firefox, this particular piece has no effect.

I’m not getting any errors in the console, and I can see the <style> tag getting properly inserted into <head>. But it just has no effect. It’s as if it’s not there.

Is there some trick to this on Firefox?

You need to add a style tag to head beside of using css files in content_scripts section of manifest? Or did you only the first one now?

I both add a css file as part of content_scripts, and insert my own style tag (later, as needed) into the head. What I was finding is that the style tag would not affect anything inserted with content_scripts CSS (e.g. if I set a CSS property on a particular element with the content_script CSS, I couldn’t override it with the inserted style tag CSS).

I got around the problem by using !important on the CSS statements. I didn’t need to do this for Chrome, but it works fine there too either way.