How to add custom CSS rules via Scratchpad

scratchpad.js

/**
 * Appends CSS code to an existing stylesheet.
 * @param styleSheetURL: URL of an existing styleSheet;
 * @param code: CSS code to append.
 */
function appendCSS(styleSheetURL, code) {
  let DOMUtils = Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
  Cu.import("resource://gre/modules/NetUtil.jsm");
  
  
  let styleSheet;
  for (let i = 0; i < document.styleSheets.length; i++) {
    if (document.styleSheets[3].href == styleSheetURL) {
       styleSheet = document.styleSheets[i];
    }
  }

  if (!styleSheet) {
    throw "Didn't find stylesheet";
  }

  NetUtil.asyncFetch(styleSheet.href, function onFetch(aStream, aStatus) {
    let source = NetUtil.readInputStreamToString(aStream, aStream.available());
    aStream.close();
    DOMUtils.parseStyleSheet(styleSheet, source + "\n" + code);
  });
}

// Multiline in JavaScript. Perfect to write some CSS.
// Finally, E4X is useful :)
 
let style = (<r><![CDATA[

  /* This is a CSS comment, not a JS comment! */
  #nav-bar {
    border: 3px solid #F06 !important;
  }
  
]]></r>);

appendCSS("chrome://browser/skin/browser.css", style);