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仍然可以胜过你！重要的是。

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

使用Firefox扩展插入CSS

1 个答案: