Can extensions overwrite CSS media features/query?

Add-ons Development
#1

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.

2 Likes
[Support] Introducing Dark Website Forcer for Firefox 67
#2

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:

2 Likes
#3

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?

Thanks!

#4

Well… in the meantime the problem for me has solved itself as I can use a new API of Firefox in v2.0 of the add-on, so I can use that to toggle the dark mode.