How can a Firefox extension inject a local css file into a webpage?
- by Evgeny Shadchnev
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?
