css - 通过 Firefox 扩展将 CSS 文件注入网页

Question

我正在编写一个 Firefox 扩展，我正在使用他们的附加 SDK；但我不知道如何将本地 CSS 文件从数据文件夹注入网页。如果有办法通过page_mod包来做到这一点，那就太好了。

Answer 1

从附加 SDK 1.14 开始， page-mod模块中对此提供了实验性（API 可能会更改）支持：

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

有关使用 page-mod 的详细指南，请参阅基于 URL 修改网页。

Addon SDK 的 wiki 上有一个页面讨论当前实现的问题，尽管它似乎有点过时了。

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

---

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

Answer 2

要从 main.js 插入 CSS，现在可以使用“page-mod”：

var data = require("sdk/self").data;
var pageMod = require("sdk/page-mod");

pageMod.PageMod({
  include: "*.org",
  contentStyleFile: data.url("my-page-mod.css")
});