This add-on is no longer under active development. Read the experiment report for what we learned from it and the blog post announcing the first SDK release for what we're up to next.

I am Jetpack. Welcome.

Exploring new ways to extend & personalize the Web.

The add-ons community for Firefox is arguably one of the largest, most vibrant sources for innovation on the Web today. If you want to affect people, to reach them and make a difference in their daily lives, the Firefox add-ons platform is hard to beat, with over one billion installs of Firefox add-ons to date.

However, we've only scratched the surface of its potential.

Jetpack lets you build Firefox (and more!) extensions with the same skill-set you already know from building on the open Web: Javascript, HTML, and CSS. We've even got jQuery included by default to ease you into it.

Make sure to visit the Jetpack website!

Developing With Jetpack

If you want to create a Jetpack feature, use the editor below.

Read the Tutorial for a quick tour of the basics—or, if you prefer, check out the API Reference.

try out this code

The Next Step

Once you've got something that you like in the editor above, you might want to consider saving it to a file. This will allow you to edit it with your choice of text editor, and will also make it really easy to share your Jetpack with others.

To do this, first make a new directory for your Jetpack, and create a file called my-first-jetpack.html in it with the following contents:

    <html>
    <head>
      <title>My First Jetpack</title>
      <link rel="jetpack" href="my-first-jetpack.js"/>
    </head>
    <body>This is my first Jetpack!</body>
    </html>
    

Then make a file called my-first-jetpack.js in the same directory and paste your Jetpack's code into it.

Once you've done this, browse to my-first-jetpack.html. A notification area should appear at the top of the page prompting you to install your Jetpack.

If you want to share your Jetpack, just upload the two files you just created to a web server and point your friends at the HTML page!

About This Page

This page houses the Jetpack Runtime. All your Jetpacks are loaded into their own Jetpack Contexts within the Runtime, and you can even use Firebug to inspect their current state. Just try entering JetpackRuntime.contexts in your Firebug console!

As a result, the lifetime of your Jetpacks is tied to the lifetime of this page. When you reload this page, for instance, all your Jetpacks are reloaded. This means that the time between making a change to a Jetpack and seeing its effects is as small as possible—you never have to restart your browser.

Because it only makes sense for one instance of Jetpack to exist at a time, this page is what developers call a singleton: only one instance of it can exist at once. Try opening this URL in two tabs at once and see what happens!

Finally, the Jetpack singleton always exists, since users obviously need to be able to use their Jetpacks without having Jetpack open in a tab. If you close the Jetpack tab, it'll actually re-open in a hidden browser that you can't see.

Modifying The Platform

If you want to hack on the Jetpack platform itself, the vast majority of it is contained in the source code for this page. Just make local changes to the file or one of the scripts it refers to and reload this page.

We've also got in-progress Platform Documentation to help you understand how everything works.

Your Jetpack Features

These are your recently-uninstalled Jetpack Features. You can reinstall them easily from here, or you can purge them from this list so they no longer clutter this page.

Memory Usage

Below is a list of all live objects being tracked by Jetpack. If one of these numbers never goes down, then your Jetpack either has a memory leak or isn't using memory very effectively.

force garbage collection

Test Suites

At the moment, you can run the Jetpack platform test suite. In the future, you'll be able to run the test suites for individual Jetpacks here.

All output for the suites is sent to the .

Only run tests containing the text:

API Reference

You have installed Jetpack Features.

You have one installed Jetpack Feature.

You have no installed Jetpack Features.

Click to run and edit the code.

Jetpack is in safe mode. You've either done this intentionally or you reloaded this page twice over a short period of time, which suggests that you may be having problems with some of your Jetpacks. All Jetpack features are temporarily disabled while in safe mode, so you can feel free to change anything you need to make Jetpack work again—this may involve fixing some code in the Develop tab, uninstalling features from the Installed Features tab, or something else. When you next reload this page, Jetpack will leave safe mode.

You either don't have the latest version of Firebug installed, or you don't have it enabled for this page, so all logging messages will appear in the . If you get Firebug 1.4 Alpha and enable it for this page, and then reload this page, all logging messages will be logged to the Firebug Console, where it's much easier to debug problems and inspect live objects.

You appear to have Firebug installed, which is great, because you'll be able to easily debug problems and inspect live objects in the . However, please note that there's still a few rough edges in Jetpack's Firebug integration that you should be aware of: We apologize for these inconveniences and will be working with the Firebug team to resolve them soon.