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>

Notes:
See lines 75 and 76, this is where most of your customization takes place.

If you want to make the content in the sidebar different then edit loadIntoWindow between lines 44 and 86 on what you want to insert. Be sure to remove this stuff in the unloadFromWindow function between lines 93 and 101.

KNOWN BUG:
If you install this demo addon, and also have the firefox facebox messenger service sidebar visible:
If you open the facebook social messenger bar, and you click and drag one splitter, it resizes both sidebars, the facebook messenger and also the sidebar add by this addon. I don't know why this is, please share advice on how to fix, I would really appreciate that.

Hi, just started to use your demo app here (i am the guy from stackiverflow with the sdk sidebar). So I have your demo code up and running. Very nice.
Can you give some more explanation about line 75/76. The whole Iframe code is rather cryptic and very hard to read. Can you give an example how that works?

Hi man glad to see people using the comments section.

In reply to your question on how to add the bar to the left side instead of right:

Replace L#82 which is browser.appendChild(splitter); with browser.insertBefore(splitter, browser.firstChild); and then replace L#85 which is browser.appendChild(sidebar); with browser.insertBefore(sidebar, browser.firstChild);

To toggle the sidebar visibility progamatically just toggle the hidden attribute of the sidebar and splitter to true or false.

For line 76, which is setting the iframe src that was an example for someone trying to load that html. Basically just remove that and replace with the source to your page you want in there. Like if you want to load bing in the sidebar set it to src: 'http://www.bing.com/' or if you want to load a page thats packaged within your addon set it to its path.