How to inject CSS located on /skin?

Question

I want to inject a css file located on the skin folder in a browser page.

It is located on chrome://orkutmanager/skin/om.css, accessing manually show the file contents correctly.

I've tried this, but it's not working... What am I missing, or is it impossible?

Answer 1

You can also use the 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);
}

If you use USER_SHEET, the website's own CSS rules have higher priority than yours. Using AGENT_SHEET, your CSS should have higher priority.
In any way I needed to enforce some rules by using hte !important keyword.

Answer 2

I found this workaround. Read the file then inject it's contents...

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);