How to inject CSS located on /skin?
I want to inject a css file located on t开发者_如何学Pythonhe 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?
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.
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);
I found that the link you referred to works if you reference the page document. In my case, using gBrowser.contentDocument
worked.
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);
Obviously make sure that you can access your css via the resource://
protocol.
精彩评论