插入带有firefox扩展名的本地css文件 [英] inserting local css file with firefox extension

问题描述

我尝试下面的 Firefox扩展如何将本地css文件注入网页？和使用Firefox扩展插件插入CSS ，但没有运气。

我知道我失去了一些蠢点，但我不能真正地弄清楚它是什么，如果有人能指出它，我真的很感激。

他的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 / 
  

和我的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）; 
  

我甚至在overlay.js中尝试过

  var sss = Components.classes [@ mozilla.org/content/style-heet-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）; 
  

没有运气。

我错过了？

---

• 尝试使用控制台，不显示任何内容
  li>
  
• 当我复制并粘贴我的hrefchrome：//helloworld/skin/global.css时，我可以在浏览器中看到我的css文件。





解决方案

您应该设置 javascript.options.showInConsole ，重新启动，然后检查错误控制台。





nsIStyleSheetService代码片段应该是最简单的工作。 p>



url 是什么？您发布的其他片段/评论彼此矛盾 - chrome.manifest和您的评论当我复制和粘贴我的href ...，我可以看到我的CSS文件在浏览器暗示你使用chrome：// helloworld / skin / global.css，但是你的其他代码段显示你使用的资源：// URL是不同的野兽。





如何确定代码段不工作？你的样式表是否错了？您是否尝试过像 * {color：red！important;} 这样简单的CSS？





如果您使用nsIStyleSheetService，请注意对MDC的注释，注意不要多次注册同一个工作表。





另外请注意，当使用nsIStyleSheetService时，你应该注意不要让你的样式适用于你不打算修改的页面。 @ -moz-document 可以非常有用的。




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.

解决方案

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.

这篇关于插入带有firefox扩展名的本地css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！