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.