How to write a simple AddOn using Mozilla JetPack

What is Mozilla JetPack

Jetpack is a project to make it easy to build Firefox 4 add-ons using common web technologies like HTML, Javascript, and CSS. The project's goal is to enable anyone who can build a web site to participate in making the Web a better place to work, communicate, and play.

Let's create an AddOn

Pre-requirements:
0. You will need a Firefox browser - version 4 and above.
1. You have to install this addOn in order to be able to execute your code using the online builder.
2. You will need a developer account from here in order to work with online builder.


Let's write some code
Open the online builder by visiting this url https://builder.addons.mozilla.org/

Click on the button and login with your AMO account:


When the editor loads, we are ready to write some code:


Let's import widget element. "Widgets" are small pieces of content that live in the Firefox 4 add-on bar. They can be simple icons or complex web pages. You can attach panels to them that open when they're clicked, or you can define a custom click handler to perform some other action, like opening a web page in a tab.

var widgets = require("widget");

Now we can start with defining a widget that will display an icon and will contains an action that will loads a website in your current tab when you click the icon.

Easy and simple:

 
//create a widget
widgets.Widget({
  id: "talkweb-example", //set the widget ID
  label: "Widget with an image and a click handler", //set a label
  contentURL: "http://talkweb.eu/wp-content/themes/simplefolio/images/favicon.ico", 
  onClick: function() {
    require("tabs").activeTab.url = "http://talkweb.eu/"; 
  }
});

Test it

Now we're ready to test that piece of code:

Click on test icon:


And see the icon on your addon bar:



Project
You can see the whole code here and you can test it as well.