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

时间:2014-05-23 02:30:44

标签: javascript firefox firefox-addon firefox-addon-sdk

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

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

Overlay an icon on the close tab button

1 个答案:

答案 0 :(得分: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,不需要在它上面覆盖一些东西

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