Can extensions overwrite CSS media features/query?

Can WebExtensions actually somehow overwrite the result of a media query?

I mean, for JS window.match​Media() this is likely easy: Just inject a content script that overwrites that JS function.

But if “real” CSS media queries (inside css files) are used, this is not really possible, is it?

Some background: If you wonder why, my use case would be to overwrite the new prefers-color-scheme CSS media feature introduced in Firefox 67. (It’s not currently available for any other browsers that support browser/WebExtensions.)

Cross-posted on Stackoverflow.


I’ve finally made it and published a “proof-of-concept”-like add-on on AMO, so try it out, (source on GitHub), but it really was not a pleasant experience. At least the add-on can actually overwrite the mode to dark for the websites, I’ve tested it.

Basically I needed extract the CSS manually and manually apply it. (Not-so-easy JS overwrite needed, too, BTW…)

Anyway, I described how I did it in the Stackoverflow post and created a bugzilla issue listing the problems that I discovered in that approach and how a proper API or so could help.

And yeah, this sounds easy, but is a really pesky thing when actually implementing it. :stuck_out_tongue_winking_eye:


Am I correct in assuming that these limitations prevent your Dark Website Forcer extension from firing a media change event when I toggle the extension?