Global style rules in Firefox/Mozilla

One rather useful ability in Firefox and Mozilla is the ability to specify arbitrary CSS style rules to apply to rendered page content (or the browser chrome). Users can edit a file called userChrome.css (or use chromEdit) to get rudimentary ad blocking, force certain fonts/colors, and so on. However, extensions to Firefox can’t easily use userChrome.css because the file is locked while the browser is running.

rue, the _____ responsible for Adblock and various other Firefox/Mozilla extensions has discovered a clever way of flexibly and programatically getting arbitrary styles applied to all rendered content.

The keystone of the technique involves procuring access to the CSSStyleSheet corresponding to the resource://gre/res/html.css style sheet, which is what determines the base display of HTML elements. You may then (once, when your extension is loaded) call the stylesheet’s insertRuleAt() method to add your own rules; the added rules apply to all windows, event those created after the rules are added (e..g not per-window).

The current code is as follows (somewhat simplified):
var _rules = [
‘html a img { -moz-binding: url(”[somebinding]”); }’
,’html *[prop=”val”] { display: none !important; }’];

var rules =
var ss = rules.GetElementAt(0).parentStyleSheet;

for(var i = 0; i < _rules.length;) ss.insertRule( _rules[i], ++i );

Which is, of course, all well and good, except for the fact that the DOM Inspector isn’t installed for the vast majority of Firefox 1.0 installs in use. Even the XPCOM components are not present for those users who chose not to include DOMi when installing FF (at least for the release .exe; I haven’t checked on Linux, but I imagine it’s the same). Thus, we have no way of accessing the all-important CSSStyleSheet.


Now, we need to compile our own XPCOM module with the relevant CSS-fetching C++ code from the DOMi source, and since we’re aiming for cross-platform compatibility, we also must compile both a .dll and .so object — iosart has details on the headaches involved with extensions providing compiled XPCOM. (C++ is necessary because JS doesn’t have access to the nsIPresShell (presentation shell) that’s eventually called to get the applicable rules).

I’m still exploring alternate paths for acquiring access to the CSSStyleSheet object, but for now, the above method works admirably well. I’ll post the source and binaries soon, after they’ve undergone more testing. If anyone has a method for getting the requisite stylesheet without C++, I (and a number of other developers) are certainly all ears…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s