title: How can a Firefox extension inject a local css file into a webpage?
body: <p>I'm writing a Firefox extension that needs to inject a css file into webpages. The css file is bundled with the extension, so I can access it using a chrome url</p>
  
  <pre><code>chrome://extensionid/content/skin/style.css
  </code></pre>
  
  <p>I'm trying to inject css like this when the page is loaded:</p>
  
  <pre><code>var fileref = document.createElement("link");
  fileref.setAttribute("rel", "stylesheet");
  fileref.setAttribute("type", "text/css");
  fileref.setAttribute("href", "chrome://extensionid/content/skin/style.css");
  document.getElementsByTagName("head")[0].appendChild(fileref);
  </code></pre>
  
  <p>However, the css isn't loaded and Firebug shows 'Filtered chrome url' message instead of the file content, when I inspect the <code>link</code> element I created. If I try to load this css file from an external server, everything's fine.</p>
  
  <p>Is there are way to load a css file bundled with the extension?</p>