how make an addon/extension add an icon/button to the Firefox address bar if the tab is open in a certain domain?

Question

I need to make a Firefox addon add a button to the address bar if the tab is in a certain domain.

I've managed to find the element navbar-icons for the current window and add a child, but that add the icon to all tabs for that window, instead of just the relevant tab. How can I do this?

EDIT: Sorry i was on mobile and didn't include the code.

What i have so far:

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

whenever i call the above i add a icon/button to every tab instead of the current active one.

This demo addon does just this but it does not consider e10s so its old (1 yr old) and needs improvment, but it should work: gist.github.com/Noitidart/9266173 i just installed it on Firefox Beta channel and it works. it adds a orange cube to the bar on non-newtab page and when user focus is not in urlbar. — Noitidart
What code have you already tried? Please edit the question to include your source code. Please see What topics can I ask about here?, How do I ask a good question? and How to create a Minimal, Complete, and Verifiable example. If we are going to try to verify our solution works for you it is MUCH easier to do so if we have your code to start from rather than having to make it all up. Without such code there is less incentive to find an answer for you. — Makyen
@Noitidart thank you, but being very very new to this, its a bit confusing. Since i'm using the add-on SDK and the bootstrapping is done automatically, how can i use this bootstrap file? Is there an easier way? — tiagosilva
@Makyen sorry for the poor quality, i was on mobile and didn't have the code at hand, but i edited the question to include the code i have. — tiagosilva

therealjeffg therealjeffg · Accepted Answer · 2015-05-03T05:51:10

This is a hacky implementation just using the SDK's tabs and button apis:

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

It feels klugey to create / destroy the button every time we switch tabs, but the user experience is exactly what you want. A similar and perhaps 'better supported' approach might be instead to just disable the button.

how make an addon/extension add an icon/button to the Firefox address bar if the tab is open in a certain domain?

1 Answers