使用 Firefox 扩展插入 CSS

Question

我正在构建一个 Firefox 扩展程序，它将 HTML 元素添加到网站的某些页面。我想让它插入一个自定义 CSS 文件来设置这些元素的样式。如果我在页面上插入带有 CSS 的标签，它会起作用，但这不是一个理想的解决方案。

有没有办法让它加载和解析一个 CSS 文件，就好像我在标题中使用了标签一样，还是我以某种方式卡住了它？

Answer 1

chrome:// 不起作用，因为您插入的页面不允许访问其域之外的文件（包括 chrome URI）。即使您是插入链接的人也是如此，因为链接仍然在目标页面的上下文中执行。相反，您有两个选择：

您可以在清单中定义资源协议别名，然后使用资源 URI 访问 CSS。例如，以下 chrome.manifest 将允许您将 css 插入为 resource://myextresource/myfile.css:
content myext content/
resource myextresource content/css/
有关更多信息，请参阅MDN Chrome registration。另请参阅How can a Firefox extension inject a local css file into a webpage? 了解类似问题。

或者，您可以使用以下内容将 CSS 添加为 USER_SHEET。这将使您的 CSS 在所有页面中可用，因此请确保您使用非常独特的选择器。这种方法的一个警告是页面 CSS 优先于用户表。您可以使用 !important 覆盖它，但如果页面 CSS 也使用 !important ，它仍然可以胜过您。

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