Injecting custom stylesheet into a Firefox main chrome page.

gistfile1.js

// Since injecting stylesheets via chrome.manisfest doesn't work
// properly in Add-On SDK, here's a hack
// that allows adding custom stylesheets to the browser.

const isBrowser  = require("sdk/window/utils").isBrowser;
const WindowTracker = require("sdk/deprecated/window-utils").WindowTracker;

/** location of the stylesheet to inject */
const STYLESHEET_URL = "chrome://your_extension/content/stylesheet.css";

const STYLESHEET_INSTRUCTION = "type=\"text/css\" href=\"" + STYLESHEET_URL + "\"";

/** The set of all windows that we have modified. */
var globalWindows = new WeakSet();

/**
 * Invoked when a new window is opened.
 * Adds the stylesheet instruction to the top of the browser document.
 * @param window
 */
function onTrack(window) {
    if (!isBrowser(window)) return;
    if (globalWindows.has(window)) return;
    let document = window.document;
    document.insertBefore(
        document.createProcessingInstruction("xml-stylesheet", STYLESHEET_INSTRUCTION),
        document.firstChild);
    globalWindows.add(window);
}

/**
 * Invoked when a window is about to be discarded.
 * @param window
 */
function onUntrack(window) {
    if (!isBrowser(window)) return;
    if (!globalWindows.has(window)) return;
    globalWindows.delete(window);
}

/**
 * Sets up automatic window tracking.
 */
function initModule() {
    WindowTracker({
        onTrack: onTrack,
        onUntrack: onUntrack
    });
}