javascript - inserting local css file with firefox extension - Stack Overflow

admin管理员组

文章数量:1336346

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/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla/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.

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/content/style-sheet-service;1"]
    .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla/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.

• javascript
• css
• firefox
• firefox-addon

Share Improve this question Follow edited May 23, 2017 at 12:12 CommunityBot 111 silver badge asked Nov 16, 2011 at 6:19 Anidhya AhujaAnidhya Ahuja 87377 silver badges2222 bronze badges 5

• 1 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 Commented Nov 16, 2011 at 9: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 Commented Nov 16, 2011 at 10:16
• nothing shows in the console:( ... Am I suppose to wrap them up in jar file?? – Anidhya Ahuja Commented Nov 16, 2011 at 10:24
• and this is appended inside dom,<link rel="stylesheet" type="text/css" src="resource://helloworld/skin/global.css"> so I dont think it will log any error – Anidhya Ahuja Commented Nov 16, 2011 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 Commented Nov 25, 2011 at 23:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2 +50

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/ments you posted contradict each other -- the chrome.manifest and your ment "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 ment 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'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);

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

本文标签： javascriptinserting local css file with firefox extensionStack Overflow