Top 5 problems writing your first Firefox Add-On

Here is a list of problems I ran into when writing Delicious Pick, a simple Add-On that allows you to randomly choose a bookmark from your Delicious account. As simple as it might be, you still have to get used to the framework you're going to develop on, and in my case, I also had to re-enter the world of JavaScript, which I hadn't touched in years.

So I thought: well, now that I have spent all that time stuck with those silly little details I might just take note so this doesn't happen again in the future. So here's the list, in the order I ran into every one of them.

1. The "Hello World" example is not working :(

You're using Firefox 3.6*. You went through the Hello World example to grasp the basics of Add-On development and even though you followed the instructions carefully step by step, it's not working. Then you find the message "Not compatible with Firefox 3.6.13" in the Add-On window.

Well, you can force Firefox to be compatible with the add-on by modifying the file install.rdf in the Add-On's folder, like so:

They will probably fix this, but it seems the page that guides you through the steps of making the Hello World Add-On is a bit abandoned, so that's probably the reason why this was happening.

2. I know I have to respect the Global Namespace, but how???

I'd had little experience with JavaScript in the past, and the last time I did some serious work on it might have been years ago. On top of that, this is not just writing JS on a web page, this is like a little program that is going to be sharing the namespace with a lot of other little programs (Add-Ons) plus the main program (Firefox). For the sake of performance, cleanliness and to respect #1 rule to submitting Add-Ons to Mozilla, you need to respect the Global Namespace. This is the best way I found to do it.

First you gotta read this guy, oldie but a goodie. Then, just follow a similar structure to this in your .js files:

if(!com) var com={};  
if(!com.toniaddons) com.toniaddons={};  

com.toniaddons.deliciouspick = {  
haveNumTotalLinks: false,  
totalLinks: 0,

onLoad: function() {  
    // initialization code  
    this.initialized = true;  
    this.strings = document.getElementById("deliciouspick-strings");

    com.toniaddons.utils.log('deliciouspick is ready!');  
},

This is basically creating and using the com.toniaddons.deliciouspick JavaScript object, an efficient way of keeping pollution away from the Global Namespace.

3. Your new dialog is not displaying properly.

Something like this shows up when you open your dialog with openDialog(). It's transparent, and there is no apparent font formatting.

If you used the Add-On Builder, you might have noticed it adds a custom CSS file to decorate your stuff, no matter which options you chose. Well, if later, you base your XUL code on one of the files created by the Builder, you will see this is the CSS being used:

xml-stylesheet href="chrome://deliciouspick/skin/overlay.css"

To solve it, just modify the CSS or if you are happy with the standard styles, use the global CSS:

xml-stylesheet href="chrome://global/skin/global.css"

4. I want to use XMLHttpRequest to make a synchronous call

Well don't. Or at least don't if you want to have your Add-On fully reviewed by Mozilla. Even if you think your logic justifies making it that way, try to find a way to make it asynchronous. I did, because what I wanted to do was:

1. Call an external API to retrieve some data.
2. Call that API again with the data retrieved the first time, to get some more data.

Sounds like I had to wait for the (1) to finish before running (2), right? Well, I was wrong. There was a way to make it asynchronous while keeping the code logical and working. You can see an example of how this was implemented in Delicious Pick's code.

5. Ok my Add-On is ready and I know the AMO Review process is tough, any suggestions?

Here is the definitive list of links you will need to properly submit your Add-On to Mozilla.

Check https://developer.mozilla.org/en/Security_best_practices_in_extensions
Check https://developer.mozilla.org/en/XUL_School/Appendix_A%3a_Add-on_Performance
Check https://developer.mozilla.org/en/Extensions/Updating_extensions_for_Firefox_4
Check https://developer.mozilla.org/en/Submitting_an_add-on_to_AMO
Package XPI https://developer.mozilla.org/en/Extension_Packaging
Validate https://addons.mozilla.org/en-US/developers/addon/validate
AMO Review http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process
Submit! https://addons.mozilla.org/en-US/developers/addon/submit

Hope this was useful. If you have any corrections or comments please let me know.