如何注入位于/skin上的CSS？

Question

我想在浏览器页面中注入一个位于皮肤文件夹中的css文件。

它位于chrome://orkutmanager/skin/om.css上，可手动访问并正确显示文件内容。

我有tried this，但它不工作...我错过了什么，或者是不可能的？

Answer 1

我找到了这个变通方法。读取文件，然后注入其内容...

function Read(file)
{
    var ioService=Components.classes["@mozilla.org/network/io-service;1"]
        .getService(Components.interfaces.nsIIOService);
    var scriptableStream=Components
        .classes["@mozilla.org/scriptableinputstream;1"]
        .getService(Components.interfaces.nsIScriptableInputStream);

    var channel=ioService.newChannel(file,null,null);
    var input=channel.open();
    scriptableStream.init(input);
    var str=scriptableStream.read(input.available());
    scriptableStream.close();
    input.close();
    return str;
}

var style = $("<style type='text/css' />");
style.html(Read("chrome://orkutmanager/skin/om.css"));
$("head").append(style);

Answer 2

您还可以使用nsIStyleSheetService

loadCSS: function() {
     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("chrome://addon/skin/style.css", null, null);

     if(!sss.sheetRegistered(uri, sss.USER_SHEET))
         sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
}

如果你使用USER_SHEET，网站自己的CSS规则比你的有更高的优先级。使用AGENT_SHEET，你的CSS应该有更高的优先级。

在任何情况下，我都需要通过使用!important关键字来强制执行一些规则。

Answer 3

我发现，如果引用页面文档，您引用的link可以正常工作。在我的例子中，使用gBrowser.contentDocument是可行的。

var fileref = gBrowser.contentDocument.createElement("link");
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", "resource://extensionid/content/skin/style.css");
gBrowser.contentDocument.getElementsByTagName("head")[0].appendChild(fileref);

显然，要确保您可以通过resource://协议访问您的css。