使用Firefox扩展插入CSS

Question

我正在开发一个Firefox扩展程序，用于向某些网页添加HTML元素。 我想让它插入自定义的CSS文件来为这些元素设置样式。 如果我在页面上插入带有CSS的标签，它就可以工作，但这不是最理想的解决方案。

有没有办法使其加载和解析CSS文件，就像我在头部使用的标签一样，或者我必须以某种方式将其内联？

- MattBelanger

---

Firefox扩展开发者工具栏允许您在CSS菜单条目中“添加用户样式表”，并立即将样式应用于加载的页面。这似乎是您想要的功能。也许您可以在那里找到它。https://addons.mozilla.org/de/firefox/addon/60 - Andreas Schuldhaus

如果你将它内联，那么浏览器会自动加载和解析它。如果这种方法能够给你想要的效果，我不认为有什么问题。顺便说一下，这可能是https://dev59.com/43E85IYBdhLWcg3whT9r的重复问题。 - Tyler

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，则页面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);

- studgeek

---

var uri = ios.newURI(url, null, null);中的url是什么？我想要实现的是在特定页面中插入jQuery UI自定义CSS。我能否使用您建议的第二个选项来实现它？我能否使用FF插件构建器（而不使用SDK）来完成它？ - Juzer Ali

URL 是本地 CSS 文件的路径。由于您正在从受信任的代码中调用它，因此我相信您可以使用 resource://、chrome:// 或 file://。 - studgeek

我个人没有使用过Add-on Builder，但是在这个页面的底部 - https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/guides/sdk-vs-xul.html，它说明你可以调用XPCOM API（这就是我在第二个例子中展示的）。 - studgeek