Bootstrap addon demo. Shows how to add a sidebar to all browsing windows. More specifically, a sidebar which allows HTML content.

bootstrap.js

const {interfaces: Ci,	utils: Cu} = Components;
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;
		}
		//START - EDIT BELOW HERE
		var browser = aDOMWindow.document.querySelector('#browser')
		if (browser) {
			var splitter = aDOMWindow.document.createElement('splitter');
			var propsToSet = {
				id: 'demo-sidebar-with-html_splitter',
				//class: 'sidebar-splitter' //im just copying what mozilla does for their social sidebar splitter //i left it out, but you can leave it in to see how you can style the splitter
			}
			for (var p in propsToSet) {
				splitter.setAttribute(p, propsToSet[p]);
			}
			
			var sidebar = aDOMWindow.document.createElement('vbox');
			var propsToSet = {
				id: 'demo-sidebar-with-html_sidebar',
				//persist: 'width' //mozilla uses persist width here, i dont know what it does and cant see it how makes a difference so i left it out
			}
			for (var p in propsToSet) {
				sidebar.setAttribute(p, propsToSet[p]);
			}
			
			var sidebarBrowser = aDOMWindow.document.createElement('browser');
			var propsToSet = {
				id: 'demo-sidebar-with-html_browser',
				type: 'content',
				context: 'contentAreaContextMenu',
				disableglobalhistory: 'true',
				tooltip: 'aHTMLTooltip',
				clickthrough: 'never',
				autoscrollpopup: 'autoscroller',
				flex: '1', //do not remove this
				style: 'min-width: 14em; width: 18em; max-width: 36em;', //you should change these widths to how you want
				src: 'data:text/html,%3Chtml%3E%0A%3Cbody%3E%0A%3Ciframe%20width%3D%22520%22%20height%3D%22390%22%20src%3D%22http%3A%2F%2Fweb2.0calc.com%2Fwidgets%2Fhorizontal%2F%22%20scrolling%3D%22no%22%20style%3D%22border%3A%201px%20solid%20silver%3B%20%22%3E%20%3C%2Fiframe%3E%0A%3Cbr%20%2F%3E%0A%3Ca%20href%3D%22http%3A%2F%2Fweb2.0calc.com%2F%22%3EWeb%202.0%20scientific%20calculator%3C%2Fa%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E' //or just set this to some url like http://www.bing.com/
			}
			for (var p in propsToSet) {
				sidebarBrowser.setAttribute(p, propsToSet[p]);
			}
			
			browser.appendChild(splitter);
			
			sidebar.appendChild(sidebarBrowser);
			browser.appendChild(sidebar);
		}
		//END - EDIT BELOW HERE
	},
	unloadFromWindow: function (aDOMWindow, aXULWindow) {
		if (!aDOMWindow) {
			return;
		}
		//START - EDIT BELOW HERE
		var splitter = aDOMWindow.document.querySelector('#demo-sidebar-with-html_splitter');
	
		if (splitter) {
			var sidebar = aDOMWindow.document.querySelector('#demo-sidebar-with-html_sidebar');
			splitter.parentNode.removeChild(splitter);
			sidebar.parentNode.removeChild(sidebar);
		}
		//END - EDIT BELOW HERE
	}
};
/*end - windowlistener*/

function startup(aData, aReason) {
	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>demo-sidebar-with-html@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>7.0</em:minVersion>
			<em:maxVersion>10.0a1</em:maxVersion>
		  </Description>
		</em:targetApplication>

		<!-- Front End MetaData -->
		<em:name>demo sidebar with html</em:name>
		<em:description>Bootstrap addon demo. Shows how to add a sidebar to all browsing windows. More specifically, a sidebar which allows HTML content.</em:description>
		<em:creator>Noitidart</em:creator>
		<em:iconURL/>
		<em:icon64URL/>
		<em:optionsType>2</em:optionsType>
	  </Description>
	</RDF>