Official website for Linux User & Developer
FOLLOW US ON:
Dec
9

Make Firefox extensions with Mozilla Jetpack

by Kunal Deo

Mozilla Jetpack is designed to make it incredibly easy to build Firefox add-ons using a number of common web technologies like HTML and JavaScript. Join Kunal Deo as he demonstrates how to get setup ready for your creative juices to start flowing…

You can extend Firefox in the following ways…
Plug-ins: A plug-in is a native piece of code that extends the core features of the browser. Plug-ins can register with one or more MIME types, draw into a part of the browser window, obtain data from the network using URLs, post data to URLs, and add hyperlinks or hotspots that link to new URLs. Examples of browser plug-ins are Adobe Flash Player and Acrobat PDF Viewer.
Extensions (add-ons): Extensions also add features to the browser, but in a rather limited fashion. They are built in a non-native way. For example, an extension cannot draw on its own inside a browser window or do a side loading of native code. Extensions are comparatively easy to develop. Common examples of extensions include toolbar buttons, syncing services and download managers. You can develop extensions using web technologies only, such as JavaScript, CSS and DOM. Traditional Firefox extensions also make use of other technologies such as XPCOM, XPConnect, XPI and XUL.

Mozilla Jetpack

Mozilla Jetpack is a newly designed add-on (extension) system for Firefox. It is available in Firefox 3.6 or later and in Gecko 1.9.2 or later. It is built using common web technologies like HTML, JavaScript and CSS. Jetpack takes away the complexities of the traditional extension system present in Firefox. Mozilla Jetpack is still in development, with the latest version 0.8 having just been released at the time of writing.
Even in its current form, it provides several benefits over Firefox’s traditional extension system such as:

1. Installation, update and de-installation of add-ons does not require a browser restart.
2. Support for all Firefox updates.
3. It can build add-ons using common web technologies such as HTML, JavaScript and CSS. Unlike the traditional extension system, it is not mandatory to use other technologies like XPCOM, XUL etc.
4. Jetpack SDK provides a set of Python-based command-line tools to help create the new
add-ons.
5. Add-ons are automatically compatible with all future versions of Firefox updates, so there’s no need to wait for compatibility updates.
6. It uses the existing packaging system (XPI) that can run in Firefox, Thunderbird, Firefox mobile or standalone applications.

In this step-by-step tutorial, we will be building a Jetpack add-on/extension which will add a context menu for a Bing search for the hyperlinked text.

01 Creating the lud-bing-search package
The first step is to create a Jetpack package. A Jetpack package is nothing but a directory with a file in its root called package.json. This directory can also contain many other files such as JavaScript code, but package.json is a mandatory file. You can create this directory anywhere you want, but for the Jetpack documentation engine to pick it up and show the documentation related your new package, you will need to put it under the <SDK_ROOT>/packages/ directory.
Create a directory called lud-bing-search inside the Packages folder.

02 Creating the package.json file
Inside the lud-bing-search directory, create a file called package.json with the following contents:

{
 “description”:”LUD Bing Search Jetpack.”,
 “author”:”Kunal Deo (http://www.linuxuser.co.uk)”,
 “version”:”0.1”,
 “license”:”BSD”,
 “url”:”http://linuxuser.co.uk”,
 “dependencies”: [“jetpack-core”]
}

We have added the jetpack-core as the dependencies since we are going to use Jetpack APIs such as the context-menu to develop the Jetpack.

03 Understanding ‘context-menu’
Our Jetpack add-on will provide a context menu for the hyperlinked text to search for it with Bing. This will be done by using the context-menu API. The latter provides an easy-to-use way of adding items that perform an action when clicked.

Context menus can be created by using one of the following data types:
string: A CSS based selector. You can invoke menus on a node which either matches the selector or has an ancestor that matches.
undefined or null: This is the default page context. This context occurs when the menu is invoked on a non-interactive portion of the page.
function: This context is triggered whenever a function passes an object describing the current context as true.
Our jetpack module will use the string data type.
array: Array defines the context of remaining data types.

04 Creating the main module
The main module is executed first after the host application execution. In this case the host application is Firefox. Modules are created in the lib folder of the Jetpack package directory.
Create main.js in the lib folder with the following contents:

// Import the context-menu API 

var contextMenu = require(“context-menu”);

// Create a new context menu item.
var menuItem = contextMenu.Item({

// Set the label for the context menu item
 label: “Search with Bing”,

 // A CSS selector. Matching on this selector triggers the
 // display of our context menu. In this case it is designed to
 // to trigger on the hyperlink
 context: “a[href]”,

 // When the context menu item is clicked, perform a Bing
 // search for the link text.
 onClick: function (contextObj, item) {
 var anchor = contextObj.node;
 console.log(“searching for “ + anchor.textContent);
 var searchUrl = “http://www.bing.com/search?q=” +
 anchor.textContent;
 contextObj.window.location.href = searchUrl;
 }
});

// Add the new menu item to the application’s context menu.
contextMenu.add(menuItem);

05 Running the Jetpack add-on
It is time to see the Jetpack add-on in action. To run it, enter the following command from the root directory of the Jetpack add-on:

$ cfx run

This command will launch Firefox (or an alternative configured application) with the default profile. To open the Bing search context menu, right-click on any link. From the context menu select Bing Search, to open the Bing search results page for the selected link text.

Note: During the first run you may encounter the following message:

No ‘id’ in package.json: creating a new keypair for you.
package.json modified: please re-run ‘cfx run’

This is perfectly normal. cfx is creating a unique package ID and adding it to the package.json file automatically. This ID helps you to reference the package programmatically from other extensions.

06 Packaging the Jetpack add-on
Now that you have tested your Jetpack add-on, it is time to prepare it for the distribution. Mozilla Jetpack uses the same XPInstall (Cross-Platform Install) technology that is used by the Mozilla Application Suite, SeaMonkey, Mozilla Firefox, Mozilla Thunderbird and other XUL-based applications for installing traditional Mozilla extensions. This helps the new Jetpack add-ons to maintain compatibility between different types of extensions.
To prepare the XPInstall package (xpi file), perform the following command:

$ cfx xpi
Exporting extension to lud-bing-search.xpi.

You can then use the file lud-bing-search.xpi in order to distribute your very own Mozilla Jetpack extension.

Greasemonkey
Greasemonkey is a Firefox extension that allows you to customise the way webpages look and function. Although, strictly speaking it is not an extension system, it does feature a wide range of scripts – which are able to autofill forms; alter the formatting of visual aspects of a webpage such as text, borders, graphics etc; remove specific content (such as advertising pop-ups); and add links, buttons or any other type of HTML element anywhere on the webpage.

Greasemonkey scripts are typically delivered in the form of a .js (JavaScript) file. Using Greasemonkey’s Manage User Scripts options, you can include or exclude the pages on which you want to run the scripts.

@code:Hello World Greasemonkey .js

// ==UserScript==
// @name          Hello World
// @namespace     http://www.linuxuser.co.uk
// @description   A basic example of Greasemonkey that causes an alert at each page load.
// @include       *
// ==/UserScript==
alert(‘Hello LUD Readers... “Hello World!”’);

Mozilla Jetpack has greatly reduced the complexity and pain involved in working with extensions. What used to be written in 1,500 lines of code can now be written with Jetpack using only 50 lines of code. If you are out there in the extension business, it is time you gave the world’s most popular open source browser a chance using Jetpack.

See what features in the latest issue of Linux User & Developer

Linux User & Developer is the magazine for the GNU Generation
Click here to try 3 issues for £1

twitter follow us
Pages: 1 2
  • Tell a Friend
  • Follow our Twitter to find out about all the latest Linux news, reviews, previews, interviews, features and a whole more.