The Extension Bootcamp Tutorial

A few weeks ago, as part of Mozilla LabsDesign Challenge, I taught a tutorial on extension development. My goal was to impart the minimum necessary information to build a simple extension using modern best practices. I called it Extension Bootcamp: Zero to “Hello world!” in 45 Minutes.

The tutorial, which borrowed from other ones (including my ancient Tinderstatus tutorial, the venerable Building an Extension, and the new Firefox addons developer guide), covered:

  • what extensions are, what they can do, and what they’re made of;
  • how to configure your development environment on Windows, Mac OS X, or Linux;
  • how to construct an extension, including required files and directory structure;
  • how to package and test your extension;
  • a simple extension that inserts XUL into the main browser window via an overlay, styles it with CSS, listens for and responds to a DOM event on it using JavaScript, and localizes its strings with both a DTD and a properties file.

It explicitly excluded:

  • archiving chrome files into a JAR archive (valuable for large, popular, and stable extensions, but not worth the added complexity for the rest);
  • developing XPCOM components (most extensions should use JavaScript modules instead);
  • putting CSS/image files into a separate skin package (Firefox doesn’t ship with two themes, which was the original impetus for segregating these files thusly, and most extensions don’t support third-party themes, so this is unnecessary).

To conserve time, I didn’t cover:

  • developing JavaScript modules;
  • accessing XPCOM components;
  • using tools and documentation to introspect and learn Mozilla code and APIs.

Developing a Firefox extension is pretty complicated, since there are so many different pieces to it, and the tutorial ended up taking two hours, including time for the students to practice each lesson on their own computers (for which my colleague Jono‘s assistance in fielding questions was invaluable).

The video of the tutorial, edited down to 1.5 hours, as well as the slides and accompanying files are available. If I had time to work more on this, I’d expand it to include the essential topics I didn’t cover. I’d also update the Building an Extension tutorial to adopt the pedagogy of this one. If you’d like to do either of those things, please do!


Myk Melez

Myk is a Principal Software Architect and in-house entrepreneur at Mozilla. A Mozillian since 1999, he's contributed to the Web App Developer Initiative, PluotSorbet, Open Web Apps, Firefox OS Simulator, Jetpack, Raindrop, Snowl, Personas, Firefox, Thunderbird, and Bugzilla. He's just a cook. He's all out of bubblegum.


8 thoughts on “The Extension Bootcamp Tutorial

  1. Justin: I wasn’t involved on the encoding side of things, but it’s a good point; I’ll ask Pascal if he can encode them in Ogg.

  2. Sheppy: I’m pretty sure you can, but I’ll ping Pascal, who is running the design challenge, for confirmation.

  3. Sheppy: Pascal says “Absolutely. The whole content is under CC-BY license. :)”.

  4. I’ll hold off on doing the adding to MDC until I hear on the OGG version; would prefer to use that if it comes to pass.

Comments are closed.