Barra de Español: The making of a Firefox extension

Barra de Español

I have just released a new Firefox add-on called Barra de Español, a toolbar for those who are studying the Spanish language. It makes it easier to find definitions for words in Spanish or English, it helps you insert special characters that are specific to Spanish into any textbox in Firefox, and it provides links to native Spanish websites useful for learning the language. You may install it from addons.mozilla.org.

Jealousy inspired me to create this add-on. A couple of months ago, I saw an article on Tofugu.com about a Japanese toolbar and thought to myself, “Why do the people who study Japanese have all the cool tools? Where is the cool stuff for Spanish students?” Seriously, I see links to cool Japanese tools all the time, but rarely do I see the same thing for other languages. So rather than letting jealousy slowly consume me like a snake eating a mouse, I did something about it.

Doing something about it did not happen instantly though. With as many years as I’ve been writing code, I still cannot conjure working applications into being through wishful thinking alone. Also, I’ve never written an add-on for Firefox before, I did not know what was involved. Searching the tubes provided me with this handy tutorial on creating a Firefox toolbar. This was exactly what I needed, and explained in small steps the process of creating a toolbar.

Firefox add-ons are written using XUL, Javascript, and CSS. As a web developer, I already knew two out of the three. XUL turned out to be pretty simple though. It’s just an XML-based language used to describe the UI, just like you would use HTML on a web page. Some of the Javascript I wrote did require some googling, because in addition to the standard stuff (DOM, etc) used in Javascript when doing web pages, there are APIs specific to Firefox that you need to use. Overall the process of putting together this add-on was pretty quick and easy.

While I may have skills in art of coding, I lack any skill in the art of… art. So while I was able to put together a nice, functional toolbar on my own, it was ugly. What it really needed was some decent icons. Instead of taking art lessons, I looked around a bit and I found an excellent set of icons created by Yusuke Kamiyamane which were free to use under the Creative Commons Attribution License 3.0. What a deal! I can use some nice icons for my toolbar for free as long as I give credit to the person who made them? I can’t beat that.

To my credit, I did create the icons that look like “á” and “Á”. Even I can select a font and type in an image editor.Typing can be art, right?

Once I had the toolbar put together and looking nice, I needed a way to distribute it. I can use my website, but that’s not visible enough. The place to go for Firefox extensions is addons.mozilla.org. The process to get your add-on on their site is pretty easy. You register as a user, go to their developer tools page and follow the directions to upload your add-on. Your add-on isn’t publicly listed at this point though. You must first fill out all the required information about your add-on, and categorize it properly. Once you’ve done that, you can have it moved into the Sandbox, which is where Barra de Español is as I write this. Add-ons in the Sandbox get the “Experimental” label that you may have seen on some Firefox extensions. It’s also a little harder to search for them because you have to specify that you want to include experimental extensions when you search for add-ons.

The next step beyond the Sandbox is to get your add-on publicly listed. In order to do that you must upload some images showing your extension to the addons.mozilla.org site, your add-on must not be considered “pre-release”, and you must get some user reviews. Barra de Español meets all three requirements now, so I’m going to nominate to be moved to public today. When I do that, I need to describe my testing process for the add-on. I tested it by installing it and using it on Firefox 1.5, 2.0, 3.0, and the 3.5 beta on Windows XP, and also on Firefox 3.0 on Linux. Worked like a charm on all of those versions thankfully, since that’s what I claim to support. From here I’m not sure how long it will take to be publicly listed. It has to go through some review process that I’m not familiar with yet. I hope it’s as easy as the rest of the process has been.

I’d like to add a special thank you to Ramses of spanish-only.com for correcting my Spanish on the Barra de Español homepage. I hope this article was informative, interesting, or both for you. If it wasn’t, then why did you read it all the way to the bottom?