Posts Tagged ‘Firefox’

Barra de Español 1.2 is now available!

Friday, November 20th, 2009

The newest version of Barra de Español, version 1.2, is now available! See details about what’s new in this version in my post on

Simulating a keypress in Firefox

Tuesday, October 27th, 2009

Last night, I was working on Barra de Español and had spent quite a bit of time on Google looking for how to simulate a keypress in Firefox. It’s as simple as creating an event and dispatching it, though how to do so is not exactly intuitive. I needed to be able to do this because inserting accented characters from Barra de Español was not working in the message body textbox in Gmail and other webmail apps.

The way I inserted the characters before was to find the currently focused element, assume it was a textbox, and modify its value using the selectionStart property to know where the cursor was. Once I learned that the message body textbox could not be found using document.commandDispatcher.focusedElement, (that’s what “if(!focused) focused = document.commandDispatcher.focusedWindow.document.activeElement;” is all about) I found that the element used by Gmail for the message body wasn’t even a textbox, and didn’t have a value or selectionStart properties.

So the solution is to create a keypress event and dispatch it, like so:

insertchar: function(ch)
    var focused = document.commandDispatcher.focusedElement;
    if(!focused) focused = document.commandDispatcher.focusedWindow.document.activeElement;
    var evt = document.createEvent("KeyboardEvent");
    evt.initKeyEvent("keypress", true, true, null, false, false, false, false, 0, ch);

One important thing to note is that the parameter ch is not a character value, but an integer containing the character code you want to insert. So, for example, to insert the character ‘á’, ch must be the value 225. To find the values I needed I used the wonderful character lookup tool at

Bonus tip: If you are developing a Firefox extension and are using a text file in your profile’s extension directory to point to the folder where your code is located, and you move your code to another folder, you will discover that Firefox won’t load your extension, even though you edited the text file with the new location. The fix is to find a file in your profile directory called extensions.cache and delete it. This frustrated me for at least an hour last night, and Google failed me on this.

Barra de Español has been accepted to Mozilla’s public addon list

Saturday, August 29th, 2009

I got an email today from the Mozilla Add-ons group that my add-on for Firefox, Barra de Español, has been approved to be in the public listing for Firefox add-ons! This means that it’s no longer listed as “experimental” and no longer requires that users check a box in order to install it.

I was a bit surprised by how long this process took. I nominated it when I released version 1.1 on June 7. 83 days later it was accepted, and during those 83 days I had no feedback as to what was going on. A week or two ago I visited an IRC chat room for add-on developers and was told that 2 or 3 months was pretty common. Recently Mozilla released a statistics dashboard that shows how many add-ons get created or updated daily. I’m not sure how many reviewers Mozilla has, but it makes more sense why it takes as long as it does now that I can see those numbers.

Regardless, I’m happy my little add-on has been accepted and I definitely have plans to enhance it in the future.

Update: Barra de Español version 1.1 released!

Sunday, June 7th, 2009

Just a quick update to announce that Barra de Español version 1.1 has been released. For more details, see my post on about the release.

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

Friday, May 22nd, 2009

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

Jealousy inspired me to create this add-on. A couple of months ago, I saw an article on 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 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 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 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?