David Walsh Blog Firefox Toolbar

Update: The toolbar will now attempt to install when you click the link. .htaccess FTW!

I spent a few hours on Saturday doing something I've always wanted to learn how to do -- create a Mozilla Firefox extension ("addon"/plugin). I wanted to start with something fairly simple but useful so I created a David Walsh Blog toolbar. My toolbar provides quick links to different areas of my site as well as links to MooTools resources and recommended websites.

While I'd love to do one article on how I created the plugin, I think it would end up being either 200 pages long or short without necessary details. Expect a few articles with regard to making Firefox extensions. You may also access all of this project's files on GitHub. Here's a quick summary of the code files.

The CSS

#davidwalshtoolbar-search-toolbar-box	{ color:#666; }
#davidwalshtoolbar-button-mootools		{ list-style-image:url("mootools.png"); min-width:100px; }
#davidwalshtoolbar-button-friends-csstricks	{ list-style-image:url("csstricks.png"); }
#davidwalshtoolbar-button-mootools > .toolbarbutton-menubutton-button { -moz-box-orient: horizontal; }

The XML / XUL

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://davidwalshtoolbar/skin/davidwalshtoolbar.css" type="text/css"?>
<overlay id="davidwalshtoolbar-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<script type="application/x-javascript" src="chrome://davidwalshtoolbar/content/davidwalshtoolbar.js" />
	<toolbox id="navigator-toolbox">
		<toolbar id="davidwalshtoolbar-toolbar" context="toolbar-context-menu" accesskey="d" class="chromeclass-toolbar" toolbarname="David Walsh Blog Toolbar" hidden="false" persist="hidden">
			
			<!-- Home -->
			<toolbarbutton label="David Walsh Blog" id="davidwalshtoolbar-button-home" accesskey="d" image="chrome://davidwalshtoolbar/skin/logo.png" oncommand="dwb_loadURL('https://davidwalsh.name');" tooltiptext="Click here to go to the David Walsh Blog homepage." />
			
			<!-- Sugar Menus -->
			<toolbarbutton label="Topics" id="davidwalshtoolbar-button-sugar" type="menu" accesskey="o" image="chrome://davidwalshtoolbar/skin/sugar.png" tooltiptext="Which sugar would you like to learn more about?">
				<menupopup>
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/htaccess');" label=".htaccess" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/ajax');" label="AJAX" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/apache-server');" label="Apache / Server" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/apis');" label="APIs" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/blog');" label="Blog" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/bookmarking');" label="Bookmarking / Social" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/books');" label="Books" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/browsers');" label="Browsers" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/css-design');" label="CSS / Design" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/google');" label="Google" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/guest-blogger');" label="Guest Blogger" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/hosting-domain');" label="Hosting / Domain" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/javascript');" label="Javascript" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/jquery');" label="jQuery" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/link');" label="link()" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/microsoft');" label="Microsoft" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/mootools');" label="MooTools" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/mysql');" label="MySQL" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/optimization');" label="Optimization" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/php');" label="PHP" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/poll');" label="Poll" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/rand');" label="rand()" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/security');" label="Security" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/shell');" label="Shell" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/theory-ideas');" label="Theory / Ideas" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/usability-accessibility');" label="Usability / Accessibility" />
					<menuitem oncommand="dwb_loadURL('https://davidwalsh.name/sugar/xml-xhtml');" label="XML / XHTML" />
				</menupopup>
			</toolbarbutton>
			
			<!-- Twitter -->
			<toolbarbutton label="Twitter" id="davidwalshtoolbar-button-twitter" accesskey="t" image="chrome://davidwalshtoolbar/skin/twitter.png" oncommand="dwb_loadURL('http://twitter.com/davidwalshblog');" tooltiptext="Follow the blog on Twitter!" />
			
			<!-- GitHub -->
			<toolbarbutton label="GitHub" id="davidwalshtoolbar-button-github" accesskey="g" image="chrome://davidwalshtoolbar/skin/git.png" oncommand="dwb_loadURL('http://github.com/darkwing');" tooltiptext="Grab my code on GitHub." />
			
			<!-- Chat -->
			<toolbarbutton label="Chat" id="davidwalshtoolbar-button-chat" accesskey="h" image="chrome://davidwalshtoolbar/skin/chat.png" oncommand="dwb_loadURL('https://davidwalsh.name/chat');" tooltiptext="Join #davidwalshblog chat on IRC!" />
			
			<!-- Contact -->
			<toolbarbutton label="Contact David Walsh" id="davidwalshtoolbar-button-chat" accesskey="n" image="chrome://davidwalshtoolbar/skin/contact.png" oncommand="dwb_loadURL('https://davidwalsh.name/contact');" tooltiptext="Get a hold of me." />
			
			<!-- (sep) -->
			<toolbarseparator />
			
			<!-- MooTools -->
			<toolbaritem>
				 <toolbarbutton label="MooTools" id="davidwalshtoolbar-button-mootools" type="menu-button" accesskey="m" oncommand="dwb_loadURL('http://mootools.net');" tooltiptext="Visit the MooTools website.">
					  <menupopup>
							<menuitem label="Download MooTools Core" class="menuitem-iconic" tooltiptext="Create a custom build of the MooTools Core." oncommand="dwb_loadURL('http://mootools.net/core'); event.stopPropagation();" />
							<menuitem label="Download MooTools More" class="menuitem-iconic" tooltiptext="Create a custom build of the MooTools More." oncommand="dwb_loadURL('http://mootools.net/more'); event.stopPropagation();" />
							<menuitem label="David Walsh MooTools Plugin Downloader" class="menuitem-iconic" tooltiptext="Download David Walsh's MooTools Plugins" oncommand="dwb_loadURL('https://davidwalsh.name/js'); event.stopPropagation();" />
							<menuitem label="MooTools on GitHub" class="menuitem-iconic" tooltiptext="Fork the MooTools project or browse the source!" oncommand="dwb_loadURL('http://github.com/mootools'); event.stopPropagation();" />
							<menuitem label="MooTools' LightHouse" class="menuitem-iconic" tooltiptext="File a ticket or submit a patch." oncommand="dwb_loadURL('http://mootools.lighthouseapp.com/'); event.stopPropagation();" />
							<menuitem label="MooTools Users Group" class="menuitem-iconic" tooltiptext="Connect with other MooTools users." oncommand="dwb_loadURL('http://groups.google.com/group/mootools-users'); event.stopPropagation();" />
							<menuitem label="The MooTools Team" class="menuitem-iconic" tooltiptext="Learn about the people behind the project." oncommand="dwb_loadURL('http://mootools.net/developers'); event.stopPropagation();" />
					  </menupopup>
				 </toolbarbutton>
			</toolbaritem>
			
			<!-- (sep) -->
			<toolbarseparator />
			
			<!-- Search -->
			<toolbaritem id="davidwalshtoolbar-search-toolbar-item" persist="width">
				 <textbox id="davidwalshtoolbar-search-toolbar-box" value="Search the blog..." flex="1" minwidth="100" width="150" onfocus="dwb_focus(true);" onblur="dwb_focus(false);" onkeypress="dwb_keypress(event);" />
			</toolbaritem>
			<toolbaritem flex="0">
				 <toolbarbutton id="davidwalshtoolbar-search-toolbar-button" label="Blog Search" tooltiptext="Search the David Walsh Blog" image="chrome://davidwalshtoolbar/skin/search.png" oncommand="dwb_searchBlog(event);event.stopPropagation();" />
			</toolbaritem>
			
			<!-- (sep) -->
			<toolbarseparator />
			
			<!-- Script n Style -->
			<toolbarbutton label="Script & Style" id="davidwalshtoolbar-button-sns" accesskey="s" image="chrome://davidwalshtoolbar/skin/sns.png" oncommand="dwb_loadURL('http://scriptandstyle.com');" tooltiptext="Great JavaScript and CSS articles submitted by you!" />
			
			<!-- Friends -->
			<toolbarbutton label="Friends" id="davidwalshtoolbar-button-friends" type="menu" accesskey="f" image="chrome://davidwalshtoolbar/skin/friends.png" tooltiptext="Check out these great sites.">
				<menupopup>
					<menuitem class="menuitem-iconic" oncommand="dwb_loadURL('http://clientcide.com');" label="ClientCide" image="chrome://davidwalshtoolbar/skin/clientcide.png" />
					<menuitem class="menuitem-iconic" oncommand="dwb_loadURL('http://og5.net/christoph');" label="Christoph Pojer" image="chrome://davidwalshtoolbar/skin/zilence.png" />
					<menuitem id="davidwalshtoolbar-button-friends-csstricks" label="CSS-Tricks" class="menuitem-iconic" tooltiptext="Chris Coyier's Blog" image="chrome://davidwalshtoolbar/skin/csstricks.png" oncommand="dwb_loadURL('http://css-tricks.com');" />
					<menuitem class="menuitem-iconic" oncommand="dwb_loadURL('http://eriwen.com');" label="Eric Wendelin" image="chrome://davidwalshtoolbar/skin/eriwen.png" />
				</menupopup>
			</toolbarbutton>
			
		</toolbar>
	</toolbox>
</overlay>

The JavaScript

/* forwards document to new URL */
function dwb_loadURL(url)
{
    window._content.document.location = url;
    window.content.focus();
}

/* executes the search */
function dwb_searchBlog()
{
	var term = document.getElementById('davidwalshtoolbar-search-toolbar-box').value;
	if(term.length > 0 && term != 'Search the blog...') dwb_loadURL('https://davidwalsh.name/?s=' + encodeURIComponent(term));
}

/* listen for focus/blur on the search box */
function dwb_focus(state)
{
	var box = document.getElementById('davidwalshtoolbar-search-toolbar-box');
	if(state) { //focus
		if(box.value == 'Search the blog...') box.value = '';
		box.select();
      box.style.color = '#000000';
	}
	else {
		if(box.value == '') {
			box.value = 'Search the blog...';
			box.style.color = '#666666';
		}
	}
}

/* listen for search commit via keyboard */
function dwb_keypress(event)
{
	if (event.keyCode == event.DOM_VK_RETURN) dwb_searchBlog();
}

Go ahead and download the toolbar if only to see what I put together. To install the toolbar in Firefox, click "File" >> "Open File," and Firefox will ask you to install the plugin.

I hope it sparks a desire for you to create your own Mozilla extension. Keep in mind the toolbar is version 0.1. Please share your thoughts and ideas!