Blog

Here are step by step instructions on how to create a Hello World Firefox add-on using the Add-on Builder (beta). Of course, you will have to use Firefox to follow the instructions here.

1. You need an AMO (addons.mozilla.org) account to create add-ons. Create an AMO account, or just log in if you already have one.

2. Install the Add-on Builder Helper add-on. This is needed so you can test add-ons you create with the Add-on Builder.

3. Start creating the add-on. Go to the Add-on Builder website and click “Create an Add-on Now”.

4. Now you should see the Add-on Builder editor.

5. Now click on the Data add (+) button and enter “hello.html” for the File.

6. Type “Hello World!” as the content of hello.html and save.

7. Now go back to the main.js tab and replace the existing content with

var panel = require("panel").Panel({
 contentURL: require("self").data.url("hello.html")
});
panel.show();

This tells Firefox to open a popup window taking content from hello.html. require() is a global function used the bring functionality of existing modules, and in this example, the panel module.

8. Now click the Test icon to test your code.

9. Wait a few seconds and you should see “Hello World!”.

10. Now you got your add-on working, you can share it by downloading the add-on as an XPI (Cross-Platform Install) file.

That’s it. You have created your first Firefox add-on in just a few minutes. Visit the Add-on SDK for the reference guide and more tutorials.