Stylesheet for everything

2020-06-30 04:05发布

问题:

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?

回答1:

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