Overlay an icon on the close tab button in Firefox

Question

I am developing a SDK addon. I want to implement a feature called Protect Tab. Right click a tab, an icon overlays on the close tab button, thereby lessen the chance of accidentally closing the tab.

A few Firefox addons already have this feature, such as Tabloc, Tab Utilities, etc. But these are XUL addons. What do I need to do to implement this feature?

Answer 1

Copy paste this code into scratchpad with browser environment and run it:

Cu.import('resource://gre/modules/Services.jsm');
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
try {
    sss.unregisterSheet(cssUri, sss.USER_SHEET);
} catch (ex) {}

var css = '';
/*css += '[anonid="close-button"] .toolbarbutton-icon:after { content:"rawr"; position:absolute; z-index:999999; width:10px; height:10px; background-color:red; }';*/ //i dont know why but i cant seem to put a before or after pseduo element on the image so i put it on the toolbar-button, if yo ucan figure this one out share with us
css += '[anonid="close-button"]:before { position:absolute; top:5px; background-color:black; width:20px; height:20px; content:""}';
css += '[anonid="close-button"] { pointer-events:none !important; }';
var cssEnc = encodeURIComponent(css);
    var newURIParam = {
        aURL: 'data:text/css,' + cssEnc,
        aOriginCharset: null,
        aBaseURI: null
}
var cssUri = Services.io.newURI(newURIParam.aURL, newURIParam.aOriginCharset, newURIParam.aBaseURI);
sss.loadAndRegisterSheet(cssUri, sss.USER_SHEET);

i overlay an image on top with pseudo element.

however you can just change the src of the image element, no need to overlay something on top of it

btw to prevent click on that close button you dont need to overlay anything you can just set the pointer-events to none like i did above.