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.

Please check Error Console, do any errors show up? Also, feel free to insert `Components.utils.reportError("test")` into your code to verify that it is running at all. The code snippets you list here are fine. — Wladimir Palant, Nov 16 '11 at 09:16
Thank you so much for your reply and for confirming that the code is correct.Where am I suppose to write this : Components.utils.reportError("test"),, inside my overlay.js??? — Anidhya Ahuja, Nov 16 '11 at 10:16
nothing shows in the console:( ... Am I suppose to wrap them up in jar file?? — Anidhya Ahuja, Nov 16 '11 at 10:24
and this is appended inside dom, so I dont think it will log any error — Anidhya Ahuja, Nov 16 '11 at 10:29
Regarding `reportError`, I'd put it right before and right after the call that loads the stylesheet (e.g. appendChild in the first snippet and loadAndRegisterSheet in the other) to be absolutely sure it runs. — Nickolay, Nov 25 '11 at 23:54

score 2 · Answer 1 · answered Nov 16 '11 at 12:19

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

yes edited as you suggested,although it didnt work for my problem ,but thank you so much providing this info — Anidhya Ahuja, Nov 18 '11 at 10:37

Nickolay · Accepted Answer · 2011-11-25T23:54:35.543

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.

I meant tried copying that url,chrome://URL and resource://URL to the url bar,and in case of chrome://URL I could see my css.And thanks a lot,it works like a charm now.Also thanks for the wonderful explanation — Anidhya Ahuja, Nov 28 '11 at 10:53
@AnidhyaAhuja: no problem, but did you figure out what specifically was the issue? — Nickolay, Nov 28 '11 at 19:09

score 1 · Answer 3 · answered Nov 16 '11 at 20:08

1

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

answered Nov 16 '11 at 20:08

erikvold

15,988
11
54
98

That's useful for applying the stylesheet to the browser's interface, not to the content page, as the OP seems to be trying to do. – Nickolay Nov 25 '11 at 22:06

inserting local css file with firefox extension

3 Answers3

Linked