Getting started with Jetpack
Written by Mike James   
Wednesday, 30 June 2010
Article Index
Getting started with Jetpack
Hello Jetpack
Widgets

Jetpack is an easy way to create Firefox and Thunderbird addons - but at the moment this isn't very easy because of the lack of documentation. This tutorial aims to get you started with the latest version of Jetpack.

 

This is a very basic tutorial to get you started creating addins with Jetpack 0.5. It isn't an expert's guide but rather the first step on the way to using the framework to do something useful.

See Getting started with Jetpack for an overview.

First what exactly is Jetpack?

 

jetpack1

The answer is that it is a Javascript framework for building Firefox and Thunderbird addons.

What is special about both Firefox and Thunderbird is that they both use the Gecko layout engine. What is special about this is that Gecko is used not only to layout the HTML of the web page but of the entire application. That is Firefox, for example, uses Gecko to create its entire user interface as well as render the HTML page it is currently showing.To be more precise Firefox uses XUL (pronounced zool), an XML langauge, to specify its user interface and Gecko renders it.

What this means is that Gecko is a complete application framework that you can use to develope your own applications.That is you can use Gecko to build applications that will run on any platform that Gecko runs on and given its the core of many web browsers that means most platforms.

The only problem is XUL and its associated XPCOM are poorly documented and hence difficult to use.

However as Gecko is essentially an HTML layout machine one approach to using it is via Javascript. After all, if you can create a web page using nothing but Javascript then why not a XUL user interface?

In this tutorial our aim will be much lower. All we are going to look at is how to use Javascript with the help of Jetpack to create a Firefox "hello world" addon. We are not going to be generating a complete UI but adding to the existing Firefox UI.

Getting started

To get started you need to first download the Jetpack SDK. You can install this under Windows or under Linux, or in fact under any OS that supports Python 2.5.

If you are going to work under Windows then you will first need to install Python. If you are working with Linux then the chances are it will be installed already. 

Probably the simplest thing to do is to use a virtual machine and install the latest version of Ubuntu Linux which comes with all of the tools you need, including Python.

You also need a working version of Firefox to test everything out.

Next download the SDK as a ZIP. It doesn't matter what platform you are using it is the same ZIP that you use as the code is all in Python.

Next you have to unzip the SDK to a suitable directory. It doesn't really matter where you unzip it to as there isn't a system-wide standard location for it. I chose to unxip it into Documents directory under Ubuntu - the same location, i.e. My Documents will do under Windows.

if you plan to move on from this simple example to developing a real add-on then might like to reconsider where you store the code.

The unziped SDK lives in a folder called jetpack-sdk-0.5.

To use the SDK you have to setup a special command line prompt by running the activate program which is stored in the SDK's bin subdirectory.

For both Windows and Ubuntu you do this by first starting a command prompt and then changing the current directory to Documents/jetpack-sdk-0.5:

  • Ubuntu
    cd Documents/jetpack-sdk-0.5
  • Windows
    cd Documents/\etpack-sdk-0.5

Next to run activate use:

  • Ubuntu:
    source bin/activate
  • Windows
    bin\activate

In both cases you will now see the prompt change to:

    jetpack-sdk-0.5

to indicate that the command prompt is set up and ready to be used. You can un-prepare the command prompt by simply runing the deactivate program.

If you are reading the official documenation it tells you at this point to use the command:

    cfx testall

which should test the system and report no errors. The problem is that this takes time and there are usualy some errors reported - mostly they don't matter.

In most cases it is better to get on with trying out the example addon. 

You will also find an examples directory which appears to contain a working example - it currently doesn't work so ignore it.

<ASIN:0764596500 >
<ASIN:0975240242 >

<ASIN:0470526912>

<ASIN:1449381871>

<ASIN:1430230541>

<ASIN:0596517742>

<ASIN:0321572602>

<ASIN:0596806752>

<ASIN:0596517742>



Last Updated ( Wednesday, 30 June 2010 )