I want to load the CSS file for everything. For elements: tabs, sidebars, tags , windows, options, developer tools, etc. I need this to change the scroll bars.
How to do it in Firefox addons-sdk?
I want to load the CSS file for everything. For elements: tabs, sidebars, tags , windows, options, developer tools, etc. I need this to change the scroll bars.
How to do it in Firefox addons-sdk?
By evrything you actually mean the browser area. So what you want to do is write CSS within the brackets of @-moz-document url("chrome://browser/content/browser.xul") {
and }
. Otherwise the CSS will affect things within webpages.
There are two ways to load in a CSS sheet, one is with the nsIStyleSheetService
and one is with
window.loadSheet
.
The window.loadSheet
is the recommended way. You would do it something like this:
function registerWindows() {
var _uri = Services.io.newURI("chrome://aus-view/skin/toolbar.css", null, null);
aWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowUtils).loadSheet(_uri, 1);
}
function unregisterWindows() {
var _uri = Services.io.newURI("chrome://aus-view/skin/toolbar.css", null, null);
aWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowUtils).removeSheet(_uri, 1);
}
You would have to make sure to load your sheet into newly opened windows.
With the nsIStyleSheetService, you just loadAndRegisterSheet
and then you don't have to worry about window opening and closing. But it's harder on performance I heard. I don't know the source on this performance though.
Cu.import('resource://gre/modules/Services.jsm');
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var cssUri = Services.io.newURI('chrome://content/path/to/your/file.css', null, null);
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);
Then when you want to remove it you just do:
sss.unregisterSheet(cssUri, sss.USER_SHEET);
Now those both used files. You can make a URI without any files like this:
var css = '';
css += '* { background-color: red; }';
css += '*.hover { background-color: blue; }';
var cssEncoded = encodeURIComponent(css);
var cssEncodedWithDataURL = 'data:text/css,' + cssEncoded
Then we just make our URI the same way: var cssUri = Services.io.newURI(cssEncodedWithDataURL, null, null);
Then you just load the stylehseet the same way. (Example using 2nd method: sss.unregisterSheet(cssUri, sss.USER_SHEET)
)