css - 通过 firefox 扩展将 CSS 文件注入(inject)网页

Question

我正在编写一个 Firefox 扩展，并且正在使用他们的附加 SDK；但我不知道如何将数据文件夹中的本地 CSS 文件注入(inject)网页。如果有一种方法可以通过 page_mod 包来实现，那就太好了。

Answer 1

自 Add-on SDK 1.14 起，在 page-mod 中有对此的实验性(API 可能会更改)支持模块:

var pageMod = require("sdk/page-mod").PageMod({
  include: "*",
  contentStyleFile: require("sdk/self").data.url("my-style.css")
});

参见 Modifying Web Pages Based on URL获取使用 page-mod 的详尽指南。

有 a page on the Addon SDK's wiki讨论当前实现的问题，尽管它似乎有点过时。

在底层它使用 nsIDOMWindowUtils .loadSheet() 添加样式表而不触及页面的 DOM。 (此 API 是在 Firefox 18 中添加的，请参阅 bug 737003 。在此之前，您必须使用 nsIStyleSheetService ，它与此类似，但不是特定于选项卡的。)

---

在此之前，您可以使用 page-mod 的内容脚本来插入链接或样式元素 (example)。 [编辑] 感谢 lwburk 的评论，这里有一个更详细的详细描述 Greasemonkey Hacks: Tips & Tools for Remixing the Web with Firefox By Mark Pilgrim: "Alter a Page's Style" section .