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

Question

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

我尝试过关注Firefox扩展如何将本地css文件注入网页？并使用Firefox扩展插入CSS,但没有运气.

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

继承人我的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文件.

Answer 1

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

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

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

您如何确定该代码片段不起作用？你的样式表可能有错吗？你有没有尝试过像* {color:red !important;}CSS 这样简单的东西？

PS 如果您使用 nsIStyleSheetService，请注意MDC 上有关注意不要多次注册同一张表的注释。

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