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

Question

我正在编写Firefox扩展，并使用其附加SDK;但我无法弄清楚如何将数据文件夹中的本地CSS文件注入到网页中。如果有办法通过page_mod包，那将是非常好的。

Answer 1

作为添加SDK 1.14有实验（API可能更改）支持这个功能的page-mod模块：

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

的精心指导使用页面MOD见Modifying Web Pages Based on URL。

有a page on the Addon SDK's wiki讨论与当前实施问题，虽然它似乎有点过时。

在引擎盖下，它使用nsIDOMWindowUtils .loadSheet（）添加样式表而不触及页面的DOM。 （这个API是在Firefox 18中添加，看到bug 737003。在这之前，你必须使用nsIStyleSheetService这是类似的，但不是选项卡专用。）

---

在这之前，你可以使用页面MOD的内容脚本插入链接或样式元素（example）。感谢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现在可以使用“页面-MOD”：

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

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