_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

README

Rev1

_Ignore this revision as it is not specifically related to template-ff-addon-BootstrapURLIconWidget, it is just a starting point as the base is similar

• Forked from Noitidart/_template-ff-addon-BootstrapContentAreaContextMenu

Rev2

With this revision starts the related stuff. This revision is a fully working template/demo.
bootstrap.js

• NOTE I gave the icon a class of urlbar-icon see Line 56. This makes the icon hide whenever the "Bookmark"/"Star" icon is hidden, so like when a user clicks into the URL bar and starts to type it gets hidden, also like on new tab page it's hidden. If you don't want this behavior comment out this line.
• Got a good deal of code from Noitidart/_template-bootstrapSkeletonPlus.xpi

install.rdf

• Lowered minVersion to 4.0 as no comparability issues
• Set maxVersion to 27.0.1 as this is the latest I tested it in, it may not be compatible with Australis

Rev3

Description update of Gist. No code changes.

hi dear
i could not use the your source
my sdk is 1.15 and when i try it with the : cfx run,i view this error :
Message: ReferenceError: Components is not available in this context.
Functionality provided by Components may be available in an SDK
module: https://jetpack.mozillalabs.com/sdk/latest/docs/

However, if you still need to import Components, you may use the
chrome module's properties for shortcuts to Component properties:

Shortcuts:
Cc = Components.classes
Ci = Components.interfaces
Cu = Components.utils
CC = Components.Constructor
Example:
let { Cc, Ci } = require('chrome');

and when i try cfx xpi and open it with firefox i don't see any icon
but when i open your add on this works correctly
please help me

It doesnt work if you copy paste to sdk because sdk doesnt support startup and shutdown function.