_ff-addon-snippet-AddToolbarButtonToPalette - This shows how to add button to the toolbar palette and on customize it shows how to store the position/order of the icon. Reason to add to palette instead of adding directly to addonbar or navbar is so that user can customize. It is the XUL Overlay equivalent of adding `toolbarbutton` to `<toolbarpa…

_ff-addon-snippet-AddToolbarButtonToPalette.js

var doc = document;
var win = doc.defaultView;

var toolbox = doc.querySelector('#navigator-toolbox');

var buttonId = 'bpMyBtn';
var button = doc.getElementById(buttonId);
if (!button) {
	button = doc.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbarbutton');
	button.setAttribute('id', buttonId);
	button.setAttribute('label', 'My Button');
	button.setAttribute('tooltiptext', 'My buttons tool tip if you want one');
	button.setAttribute('class', 'toolbarbutton-1 chromeclass-toolbar-additional');
	button.style.listStyleImage = 'url("https://gist.githubusercontent.com/Noitidart/9266173/raw/06464af2965cb5968248b764b4669da1287730f3/my-urlbar-icon-image.png")';
	button.addEventListener('command', function() {
		alert('you clicked my button')
	}, false);

	toolbox.palette.appendChild(button);
}

//move button into last postion in nav-bar
var navBar = doc.querySelector('#nav-bar');
navBar.insertItem(buttonId); //if you want it in first position in navBar do: navBar.insertItem(buttonId, navBar.firstChild);
navBar.removeChild(button);

/*
//move button into last postion in TabsToolbar (i tested in this Australis I dont know if version less than 29 allow icons in toolbar)
var tabsToolbar = doc.querySelector('#TabsToolbar');
tabsToolbar.insertItem(buttonId); //if you want it in first position in tabsToolbar do: tabsToolbar.insertItem(buttonId, tabsToolbar.firstChild);

//move button into last postion in addon-bar (Australis doesnt have addon bar anymore, but a shim is in place so it will auto get moved to navBar)
var addonBar = doc.querySelector('#addon-bar');
addonBar.insertItem(buttonId); //if you want it in first position in navBar do: addonBar.insertItem(buttonId, addonBar.firstChild);
*/

README

Rev1

• Fork from dgutov / bmreplace / bootstrap.js

• Discussion about this method on Mozillazine - Programmatically add a button to toolbar palette?

• Updated article on MDN: Creating toolbar buttons (Customize Toolbar Window) - Adding the Button Bootstrap Style

• The Gist is not yet in a snippet form, so can't copy pate to Scratchpad yet.

• This is the XUL Overlay equivalent of:

  <toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton
      id="personaswitcher-button"
      label="&personaswitcher-button.label;"
      tooltiptext="&personaswitcher-button.tooltip;"
      type="menu">
      <menupopup
          id="personaswitcher-addon"
          onpopupshowing="PersonaSwitcher.buttonPopup (event);"
          onpopuphidden="PersonaSwitcher.hideSubMenu();"
      />
  </toolbarbutton>
  </toolbarpalette>
  

Rev2

• Made it so you can copy all and paste all into scratchpad and run
• It adds a button with an orange cube as its image, once you run the code go to customize and you will see it, you can now drag it to addon bar, toolbar, or australis menu panel.

Rev3

• Made it so as you run the code it moves the button from the palette to the toolbar, and in last position in the toolbar

Rev4

• Added in commented out block (lines 27 - 35) how to move button to TabsToolbar and addon-bar

Research here about persist: https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Toolbar#Adding_button_by_default