Mozilla Add-ons Community Blog

Zero to Add-on in Five Minutes

8 responses

Several months ago, I built an add-on in five minutes in front of a live audience at the 2010 Mozilla Summit to demonstrate the benefits of Add-on Builder, Mozilla’s new web app for building add-ons for Firefox.

The last time I taught traditional add-on development using XUL, it took an hour and a half to walk students through the process of setting up a development environment and building a simple “Hello, World!” add-on. This time, using Add-on Builder, I was able to demonstrate the process of building a useful add-on that translates text on web pages in five minutes.

Not all add-ons will be so simple to create, of course. And walking students through the process of building that same add-on takes a little longer.

But walking them through building a “Hello, World!” add-on really does take five minutes, because Add-on Builder provides a simple, web-based development environment, takes care of cumbersome configuration and packaging tasks, and exposes intuitive, high-level APIs using web technologies for common tasks (like adding an item to a context menu and changing a web page), making it much easier to build add-ons for Firefox.

It’s literally as simple as going to Add-on Builder, pressing the Create Add-on button (signing in/up as needed), then entering console.log("Hello, World!"); into the editor and pressing the Test button (installing Add-on Builder Helper as needed). “Hello, World!” will then appear in the Error Console. You don’t even need to restart Firefox!

See for yourself! Check out the video of my demonstration (full-size version):

Then check out the code on Add-on Builder.

8 comments on “Zero to Add-on in Five Minutes”

  1. SilverWave wrote on

    Very very cool 🙂

    Cheers.

  2. glob wrote on

    wow, excellent demo 🙂

  3. Nicolas wrote on

    Hey, nice one at 2:01 ! 🙂
    Do we know how many add-ons have been built with the builder and submited to AMO ?
    It seems a very good way to reduce the learning curve for new addon devs.

  4. xabolcs wrote on

    Nice to see the URL’s “/hu/” postfix. 🙂

  5. myk wrote on

    Nicolas: I’m not sure how many were built with the builder, but there are 49 addons that were built either with the builder or with the SDK, based on the list of addons tagged ‘jetpack’ on AMO.

    xablocs: Igen, én is azt gondolom!

  6. SpeedGun wrote on

    Very cool.

    But there are so many translation jetpacks that this addon is almost simple 😛

  7. FARKAS Máté wrote on

    Fantastic presentation, you was worthy of the applause. 🙂

    myk: nekem is nagyon jól esett a magyar oldalt látni. 🙂

  8. Johan Sundström wrote on

    As the new add-on builder still has a horrible google ranking and is very difficult to find via search engines, it would be very useful if the old one at https://addons.mozilla.org/en-US/firefox/developers/tools/builder/ (first hit for both “firefox add-on builder” and “mozilla add-on builder”) would acquire a little preface guiding people to the modern way of doing it, and maybe suggesting the old one only be used for making pre-FF4 add-ons.