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

Question

我正在开发一个 SDK 插件。我想实现一个名为“保护选项卡”的功能。右键单击选项卡，关闭选项卡按钮上会叠加一个图标，从而减少意外关闭选项卡的机会。

一些 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，无需在其上覆盖某些内容

顺便说一句，为了防止点击关闭按钮，您不需要覆盖任何内容，您只需将指针事件设置为无，就像我上面所做的那样。