使用firefox扩展插入本地css文件

时间:2011-11-16 06:19:22

标签: javascript css firefox firefox-addon

我正在构建一个firefox扩展,需要在doc中插入一些元素和css。

我尝试关注How can a Firefox extension inject a local css file into a webpage?Inserting CSS with a Firefox Extension,但没有运气。

我知道我错过了一些愚蠢的观点,但我无法弄清楚它是什么,如果有人可以向我指出,我会非常感激。

继承人我的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-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);

再没有运气。

我错过了什么?我真的想不出来。


  • 使用控制台尝试,不显示任何内容
  • 当我复制并粘贴我的href“chrome://helloworld/skin/global.css”时,我可以在浏览器中看到我的css文件。

3 个答案:

答案 0 :(得分:2)

我不确定这是否能解决您的问题,但您应该在所有标签中监听加载事件,将overlay.js改为:

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

答案 1 :(得分:2)

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

nsIStyleSheetService片段应该是最简单的工作方式。

其中url是什么?您发布的其他片段/评论相互矛盾 - chrome.manifest和您的评论“当我复制并粘贴我的href ...时,我可以在浏览器中看到我的css文件”暗示您正在使用chrome:// helloworld / skin / global.css,但是您的其他代码段显示您使用的是资源:// URL,这是一个不同的野兽。

如何确定代码段不起作用?你的样式表有错吗?您是否尝试过像* {color:red !important;}这样简单的CSS?

P.S。如果您使用nsIStyleSheetService,请注意the comment on MDC about taking care not to register the same sheet multiple times

另请注意,使用nsIStyleSheetService时,请注意不要将样式应用于您不打算修改的页面。 @-moz-document对此非常有用。

答案 2 :(得分:1)

忘记overlay.js文件和overlay.xul文件,你不需要它。使用style instruction for chrome.manifest instead,如下所示:

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

没有js要求