Restartless Firefox Add-ons, Part 7: CSS

If you want to use css in your restartless addon, then you have wondered what the best way to do so is. There are many options, you could create xul/html elements to inject css, or you could simply alter the style attribute of elements you care about, but the other option (and the best one imo) is to use the nsIStyleSheetService to load css.

Loading and unloading

Use the loadAndRegisterSheet() method to load css at startup, and then use unregisterSheet() to unload the file during shutdown.

Getting CSS URL

You can use the bootstrap.js's "__SCRIPT_URI_SPEC__" constant to find the url of your css. For example, if you named your css file main.css and it was in a 'skin' folder in the root of your addon, then the url of the css file will be:

@-moz-document

You must use @-moz-document however to define which content or chrome page(s) the css rules that you are defining should run on. Userstyles have the same requirements.

Example

Here is a example where I separated the css from the bootstrap.js file for a addon called Search Tabs.