javascript - 使用 Firefox 扩展插入 CSS

Question

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

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

Answer 1

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

您可以在 list 中定义资源协议(protocol)别名，然后使用资源 URI 访问 CSS。例如，以下 chrome.manifest 将允许您将 css 作为 resource://myextresource/myfile.css 插入:
content myext 内容/
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);