inserting local css file with firefox extension

Question

I am building a firefox extension and need to insert some elements and css into the doc.

I tried following How can a Firefox extension inject a local css file into a webpage? and Inserting CSS with a Firefox Extension, but had no luck.

I know am missing some silly point but I cant really make out what it is,and would really appreciate if some one can point it out to me.

Heres my chrome.manifest:

 content    helloworld content/
overlay chrome://browser/content/browser.xul    chrome://helloworld/content/overlay.xul

locale  helloworld  en-US   locale/en-US/

skin    helloworld  classic/1.0 skin/

And my overlay.js:

var fileref = gBrowser.contentDocument.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "resource://helloworld/skin/global.css");
gBrowser.contentDocument.getElementsByTagName("head")[0].appendChild(fileref);

I even tried this inside my overlay.js

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
    .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI(url, null, null);
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);

No luck again.

What am I missing? I seriously can't figure out.

---

• Tried using the console,shows nothing
• When I copy and paste my href "chrome://helloworld/skin/global.css", I can see my css file in the browser.

Answer 1

You should set the javascript.options.showInConsole, restart, then check the Error Console.

The nsIStyleSheetService snippet should be the simplest to get working.

What's the url in it? The other snippets/comments you posted contradict each other -- the chrome.manifest and your comment "When I copy and paste my href ..., I can see my css file in the browser" imply you're using chrome://helloworld/skin/global.css, but your other snippet shows you use a resource:// URL, which is a different beast.

How do you determine the snippet is not working? Could you have your stylesheet wrong? Did you try something simple like * {color:red !important;} as your CSS?

P.S. If you use nsIStyleSheetService, please note the comment on MDC about taking care not to register the same sheet multiple times.

Also note that when using nsIStyleSheetService you should be careful not to make your styles apply to the pages you didn't intend to modify. @-moz-document can be very useful for that.

Answer 2

I'm not sure if this will solve your problem, but you should listen for load events in all tabs changing your overlay.js to something like:

window.addEventListener('load', function () {
gBrowser.addEventListener('DOMContentLoaded', function (event) {
  if (event.originalTarget.nodeName == '#document' && 
     event.originalTarget.defaultView.location.href == gBrowser.currentURI.spec)
  {
    var document = event.originalTarget;
    // Your css injection here
  }
}, false),
true);

Answer 3

Forget the overlay.js file and the overlay.xul file, you don't need it. Use the style instruction for chrome.manifest instead, like so:

style chrome://browser/content/browser.xul resource://helloworld/skin/global.css

No js req'd