How can a Firefox extension inject a local css file into a webpage?

Question

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

chrome://extensionid/content/skin/style.css

I'm trying to inject css like this when the page is loaded:

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);

However, the css isn't loaded and Firebug shows 'Filtered chrome url' message instead of the file content, when I inspect the link element I created. If I try to load this css file from an external server, everything's fine.

Is there are way to load a css file bundled with the extension?

Answer 1

Use resource: instead of chrome:?