_template-ff-addon-BootstrapURLIconWidget - This bootstrap addon shows how to add an icon to the URL bar and when clicked it opens a panel.

_template-ff-addon-BootstrapURLIconWidget.xpi

bootstrap.js

const {interfaces: Ci, utils: Cu} = Components;
const self = {
	id: 'Bootstrap-URL-Icon-Widget',
	suffix: '@jetpack',
	name: 'Bootstrap URL Icon Widget',
	//path: 'chrome://bootstrap-url-icon-widget/content/', //we don't have chrome.manifest in this gist so we cant use this
	aData: 0,
};

Cu.import('resource://gre/modules/Services.jsm');

/*start - windowlistener*/
var windowListener = {
	//DO NOT EDIT HERE
	onOpenWindow: function (aXULWindow) {
		// Wait for the window to finish loading
		let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
		aDOMWindow.addEventListener("load", function () {
			aDOMWindow.removeEventListener("load", arguments.callee, false);
			windowListener.loadIntoWindow(aDOMWindow, aXULWindow);
		}, false);
	},
	onCloseWindow: function (aXULWindow) {},
	onWindowTitleChange: function (aXULWindow, aNewTitle) {},
	register: function () {
		// Load into any existing windows
		let XULWindows = Services.wm.getXULWindowEnumerator(null);
		while (XULWindows.hasMoreElements()) {
			let aXULWindow = XULWindows.getNext();
			let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
			windowListener.loadIntoWindow(aDOMWindow, aXULWindow);
		}
		// Listen to new windows
		Services.wm.addListener(windowListener);
	},
	unregister: function () {
		// Unload from any existing windows
		let XULWindows = Services.wm.getXULWindowEnumerator(null);
		while (XULWindows.hasMoreElements()) {
			let aXULWindow = XULWindows.getNext();
			let aDOMWindow = aXULWindow.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowInternal || Ci.nsIDOMWindow);
			windowListener.unloadFromWindow(aDOMWindow, aXULWindow);
		}
		//Stop listening so future added windows dont get this attached
		Services.wm.removeListener(windowListener);
	},
	//END - DO NOT EDIT HERE
	loadIntoWindow: function (aDOMWindow, aXULWindow) {
		if (!aDOMWindow) {
			return;
		}
		var urlbarIconsBox = aDOMWindow.document.getElementById('urlbar-icons');
		if (urlbarIconsBox) {
			var myUrlbarIcon = aDOMWindow.document.createElement('image');
			myUrlbarIcon.setAttribute('id', 'my-urlbar-icon');
			myUrlbarIcon.setAttribute('class', 'urlbar-icon');
			myUrlbarIcon.setAttribute('src', self.aData.resourceURI.spec + 'my-urlbar-icon-image.png'); //spec looks like "	jar:file:///C:/Users/ali57233/AppData/Roaming/Mozilla/Firefox/Profiles/ncc90nnv.default/extensions/[email protected]!/"
			//urlbarIconsBox.appendChild(myUrlbarIcon); //or if want to insert it at the end of icons then comment out the block below and uncomment this line
			/*start - block of code to insert icon as first child, so before the star button*/
			if (urlbarIconsBox.childNodes.length > 0) {
				urlbarIconsBox.insertBefore(myUrlbarIcon, urlbarIconsBox.childNodes[0]);
			} else {
				urlbarIconsBox.appendChild(myUrlbarIcon);
			}
			/*end - block of code to insert icon as first child, so before the star button*/
			
			//create and add the panel now
			var myPanel = aDOMWindow.document.createElement('panel');
			var props = {
			    type: 'arrow',
			    noautofocus: true,
			    level: 'parent',
			    style: 'width:300px; height:300px;',
			    id: 'my-urlbar-icon-panel'
			};
			for (var p in props) {
			    myPanel.setAttribute(p, props[p]);
			}
			//instead of this props block we can add properties just like we did for my-urlbar-icon like myPanel.setAttribute('type', 'arrow') and so on, this loop just makes it easy
			
			var mainPopupSet = aDOMWindow.document.getElementById('mainPopupSet');
			mainPopupSet.appendChild(myPanel);
			
			//add the click listener to the icon so when clicked it opens the panel
			myUrlbarIcon.addEventListener('click', function() {
				myPanel.openPopup(myUrlbarIcon);
			}, false);
		}
	},
	unloadFromWindow: function (aDOMWindow, aXULWindow) {
		if (!aDOMWindow) {
			return;
		}
		var myUrlbarIcon = aDOMWindow.document.getElementById('my-urlbar-icon');
		if (myUrlbarIcon) {
			myUrlbarIcon.parentNode.removeChild(myUrlbarIcon);
			var myPanel = aDOMWindow.document.getElementById('my-urlbar-icon-panel');
			myPanel.parentNode.removeChild(myPanel);
		}
	}
};
/*end - windowlistener*/
function startup(aData, aReason) {
	self.aData = aData; //must go first, because functions in loadIntoWindow use self.aData
	windowListener.register();
}

function shutdown(aData, aReason) {
	if (aReason == APP_SHUTDOWN) return;
	windowListener.unregister();
}

function install() {}

function uninstall() {}

install.rdf

<?xml version="1.0" encoding="utf-8"?>
	<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
	<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
	  <Description about="urn:mozilla:install-manifest">
		<em:id>Bootstrap-URL-Icon-Widget@jetpack</em:id>
		<em:version>initial</em:version>
		<em:type>2</em:type>
		<em:bootstrap>true</em:bootstrap>
		<em:unpack>false</em:unpack>

		<!-- Firefox -->
		<em:targetApplication>
		  <Description>
			<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
			<em:minVersion>4.0</em:minVersion>
			<em:maxVersion>27.0.1</em:maxVersion>
		  </Description>
		</em:targetApplication>

		<!-- Front End MetaData -->
		<em:name>Bootstrap URL Icon Widget</em:name>
		<em:description>This bootstrap addon shows how to add an icon to the URL bar and when clicked it opens a panel.</em:description>
		<em:creator>Noitidart</em:creator>
	  </Description>
	</RDF>

my-urlbar-icon-image.png