如果选项卡在某个域中打开,如何使插件/扩展添加图标/按钮到Firefox地址栏？

Question

如果选项卡位于某个域中,我需要让Firefox插件向地址栏添加一个按钮.

我已经设法找到当前窗口的元素navbar-icons并添加一个子项,但是将该图标添加到该窗口的所有选项卡,而不仅仅是相关的选项卡.我怎样才能做到这一点？

编辑:对不起,我在手机上,并没有包含代码.

到目前为止我有什么:

var windowsUtils = require('sdk/window/utils');

var loadButton = function(doc, urlBtnClick) {
    var urlBarIcons = doc.getElementById('urlbar-icons');

    var btn = doc.createElement('toolbarbutton');
    btn.setAttribute('id', 'button-icon');
    btn.setAttribute('image', self.data.url('./images/icon16.png'));
    btn.click(onButtonClick);
    urlBarIcons.appendChild(btn);
    return btn;
}

var onButtonClick = function(event) {
    console.log('i was clicked');
}

每当我打电话给上面的时候,我都会在每个标签上添加一个图标/按钮,而不是当前活动标签.

Answer 1

这是一个仅使用 SDK 的选项卡和按钮 api 的 hacky 实现：

let { ActionButton } = require("sdk/ui/button/action");
let tabs = require('sdk/tabs');
let soButton;

tabs.on('activate', (tab) => {
  if (/^http[s]*\:\/\/stackoverflow.com/.test(tab.url)) {
    soButton = ActionButton({
      id: "so-button",
      label: "This is StackOverflow!!",
      icon: {
        "16": "chrome://mozapps/skin/extensions/extensionGeneric.png",
        "32": "chrome://mozapps/skin/extensions/extensionGeneric.png"
      },
      onClick: function(state) {
        console.log("clicked");
      }
    });
  } else {
    if (soButton && typeof (soButton.destroy === 'Function')) {
      soButton.destroy();
    }
  }
});

每次切换选项卡时创建/销毁按钮感觉很麻烦，但用户体验正是您想要的。一种类似且可能“得到更好支持”的方法可能是仅禁用该按钮。