Firefox Add-on Builder Hello World

  • Post author:
  • Post category:Firefox

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”.

Firefox Add On Builder

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

Editor - Add-On-Builder

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

Add Button Two

Add

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

Type Hello World

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.

Click Test

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

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.

Download Add-On

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.

This Post Has 3 Comments

  1. dein.freund

    !!! GREAT, THANXS !!!

    I’m still looking for a good javascript tutorial…

  2. Rodrigo

    Hello,

    I wonder if is possible to use java applet

  3. gleb

    Please, make example with onShow & onHide events for Panel…

Comments are closed.