FastTrack To Developing for Firefox

We at Digit have always had a soft spot in our hearts for Open Source, like most other people with a deep interest in having worldwide harmony prevail – in the digital form at least, because the real thing isn’t anywhere on the horizon. But yes, open source has grown by leaps and bounds, and it fills our hearts with joy and renewed hope. A few years ago, you’d know you’ve run into a power user when you found them all up in arms about the kind of proprietary practices rampant in the industry. Fast forward to today, and you see that more people are looking up to free and open source software than ever before. It seems like something good did come out of the whole NSA fiasco. Don’t get us wrong, every human being ever loves free stuff, but it’s encouraging to see the move from “free as in free beer” to “free as in free speech”. If you’ve been with us for long (tech hipsters, y’know), you’d be aware of our agenda to reach out and lead some converts to the too-good-to-be-true-but-let’s-try-it-anyway land of open source, which we embarked on about a decade ago when a new Linux distro was made a staple of every month’s DVD. In fact, the seeds for this month’s Fast Track were planted years ago, when the writer of this month’s booklet had his first brush with Linux through Digit’s DVDs.

Introduction: The mozilla mission

To a regular person from the 90s, our current world would seem really strange. Although there would be a million reasons to account for that, the Internet would take up a huge chunk of those reasons. The speed at which we’ve moved forward in that regard is, for lack of a better word, surprising. This is because today, a large faction of the community is an active participant in the medium, as opposed to being silent spectators. Web 2.0, ‘the web the world made’ is so mainstream, it’s almost old. It’s marvellous when you think about the kind of journey we’ve had to take to arrive at our present reality.

What can you do with firefox?

As the more tech-savvy readers would be aware, Firefox runs on Gecko, a free and open source layout engine. So, in essence, you can develop extensions for your browser. We’re using the term ‘extensions’ here is a very broad sense since it means anything created that was not shipped with the plain vanilla browser. There are many types of extensions that you can create for Firefox to customise your experience, and (hopefully) others’ as well, by sharing (the love and) the code.

Anatomy of an add-on

If you have any experience with building things that are supposed to work independently, you’d know that some standard files need to be present for stuff to work. Firefox add-ons have these structures too, as given on the MDN (Mozilla Developer Network – the repository of almost everything that you need to know about development using any of Mozilla’s products) website:

The grand old way to do it – xul

Around 10 years ago, somebody came up with a plan. A plan that a browser shouldn’t be limited to what the developer of the browser shipped it as – but what the users want it to be. That meant giving anyone the authority to make changes to the default form and functionality provided by the browser. Such power in the hands of the people who were probably not actively involved in the development of a browser was unheard of. Fast forward to today and such practices are the staple of our internet experience. About 85% of browser users take advantage of extensions, millions of which have been created by non-Mozilla employees – ranging from tools as simple as ad-blockers to complex DOM investigation and network sniffing tools.

A boilerplate xul add-on

The core purpose of this Fast Track is to acquaint the reader with what it means to write code for the Firefox platform, and how it could be done. With that in mind, let’s go ahead and test the waters, just to see what it feels like. We’ll work on a rather straightforward codebase.

A new way to develop – the jetpack api

By general estimations, about everybody is happy with their browser’s extensions. Of the billions that use browsers, 85% have some sort of an extension installed. Over the years, there’s been some criticism of the fact that a lot of background knowledge was required for developing what would eventually just be a new feature in the browser.

A boilerplate jetpack add on

If you’ve given the table of contents for this Fast Track a quick glance, you’d know that we’ll be shortly developing a comprehensive add-on in this booklet. But before we do that, let’s test the waters on a much smaller scale.

The case for choosing jetpack over xul

Now that you know of the ways by which you can develop for Firefox, it’s probably time for you to play favorites. And we should probably pronounce our verdict about the better option. Without further ado, we think it’s Jetpack.

An exercise in comprehensive development

We guess by now, you’ve developed a good understanding of the Firefox add-on world. Now it’s time to put this knowledge to use, and create something tangible. We’ll now proceed to create an interactive dashboard which will represent the memory consumption statistics of the browser, and the elements running inside it.

The new frontiers

We hope that by now, you’ve developed a rather comprehensive (but obviously, in no way complete) knowledge of what developing for Firefox entails. With the kind of goals that the Mozilla Foundation set out to achieve, it was inevitable for it to move beyond solely developing a browser – it would need to expand to arenas that are touching the lives of people in a big way, through a medium that’s supposed to be one of the driving forces behind the next generation of internet experience – the mobile.