Search code examples
firefoxfirefox-addonfirefox-addon-sdk

Make background tabs to be always in hover state

Is there any extension or any way by which we can make all background tabs of firefox to be always in hover state.

Like this: enter image description here

I'm new to add-ons development, I checked the tabs api: https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/tabs, but did not find anything related to reading or manipulating hover event.

Solution

  • Inspector shows that when tab is hovered it gets this style: chrome://browser/skin/browser.css line 2504

    copy paste this to scratchpad it does the trick

    Cu.import('resource://gre/modules/Services.jsm');
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);

var css = '';
css += '.tab-background:not([selected=true]) {';
css += 'background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),';
css += 'url(chrome://browser/skin/tabbrowser/tab-background-middle.png),';
css += 'url(chrome://browser/skin/tabbrowser/tab-background-end.png);';
css += 'background-position: left bottom, 30px bottom, right bottom;';
css += 'background-repeat: no-repeat;';
css += 'background-size: 30px 100%, calc(100% - (2 * 30px)) 100%, 30px 100%;';
css += '}';
var cssEncoded = encodeURIComponent(css);
var cssEncodedWithDataURL = 'data:text/css,' + cssEncoded;

var cssUri = Services.io.newURI(cssEncodedWithDataURL, null, null);

sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);

//sss.unregisterSheet(cssUri, sss.USER_SHEET); //do this when you want to remove it