插入带有 firefox 扩展名的本地 css 文件

我正在构建一个 Firefox 扩展，需要在文档中插入一些元素和 css。

我尝试以下Firefox 扩展如何将本地 css 文件注入网页？ https://stackoverflow.com/questions/2731736/how-can-a-firefox-extension-inject-a-local-css-file-into-a-webpage and 使用 Firefox 扩展插入 CSS https://stackoverflow.com/questions/2685243/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 文件。

您应该设置javascript.options.showInConsole https://developer.mozilla.org/en/Setting_up_extension_development_environment#Development_preferences，重新启动，然后检查错误控制台。

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

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

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

附：如果您使用 nsIStyleSheetService，请注意MDC 上关于注意不要多次注册同一张表的评论 https://developer.mozilla.org/en/Using_the_Stylesheet_Service#Determining_whether_a_sheet_has_been_loaded.

另请注意，在使用 nsIStyleSheetService 时，您应该小心，不要将样式应用到您不打算修改的页面。@-moz-文档 https://developer.mozilla.org/index.php?title=en/CSS/%40-moz-document对此非常有用。