Created
June 19, 2011 05:47
-
-
Save erikvold/1033799 to your computer and use it in GitHub Desktop.
A example using the "userstyles" Jetpack module.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var self = require("self"); | |
var us = require("userstyles"); | |
exports.main = function() { | |
var url = self.data.url("black-google.css"); | |
us.load(url); | |
}; |
(And pardon IANA for serving a 404 instead of that chilling image, by the way; I'm sure they withhold it from us for the very best of reasons.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks! I think the answer to the thing that eluded me the most is the design of nsIStyleSheetService (and do correct me if I'm wrong):
There is no reference to any specific event being listened to or timing of when the call is made (main.js is just executed, once only, some time during browser startup, or just after the add-on is first installed, depending on what the first-start context is), because all the css you add will be taken care of by that service in the css cascade performed on every web (and xul) page ever after until the browser shuts down again, as soon as they load.
So you need all your css to spell out all its contextual dependencies (such as
@-moz-document url(http://www.w3.org/), url-prefix(http://www.w3.org/Style/), domain(mozilla.org), regexp("https:.") { / css for those urls here */ }
), which means that if you want to do anything wonky like css that is different in different phases of the moon you can't just pick a different css file / string at different times, but have use tricks like adding all css styles you want for everything, and making some of them depend on page mods you do on document structure (like, say, adding adata-moon-phase="waxing gibbous"
attribute to the<html>
element, a k adocument.documentElement
) and reference it in your css in rules likehtml[data-moon-phase="waxing gibbous"] body { background: url("http://example.com/howling-donkey.png"); }
.