在Firefox中的关闭选项卡按钮上叠加一个图标

Question

我正在开发SDK插件。我想实现一个名为Protect Tab的功能。右键单击选项卡，关闭选项卡按钮上的图标覆盖，从而减少意外关闭选项卡的可能性。

一些Firefox插件已经具有此功能，例如Tabloc，Tab Utilities等。但这些是XUL插件。我需要做些什么才能实现此功能？

Answer 1

使用浏览器环境将此代码粘贴到暂存器中并运行它：

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

我用伪元素将图像叠加在上面。

但是你可以只改变图像元素的src，不需要在它上面覆盖一些东西

顺便说一句，为了防止点击你不需要覆盖的关闭按钮，你可以将指针事件设置为无，就像我上面那样。