Create firefox Extension (Add-on SDK-based extensions)

This article will guide you in to create a simple firefox extension . There are three different techniques you can use to build extensions: Add-on SDK-based extensions, manually bootstrapped restartless extensions, and legacy extensions. This tutorial will take you through the steps required to build a very basic extension - one which adds a action button . SDK Installation Prerequisites To develop add-ons using the current Add-on SDK, you'll need:

  • Python 2.5, 2.6 or 2.7. Note that versions 3.x of Python are not supported on any platform.
  • Firefox Browser.
  • The SDK itself: you can obtain the latest stable version of the SDK as a tarball or a zip file.

Steps to Create firefox extension

 Extract the file contents wherever you choose, and navigate to the root directory of the SDK with a shell/command prompt. For example: tar -xf addon-sdk.tar.gz cd addon-sdk Create firefox Extension Then, if you're a Bash user, run: source bin/activate Create firefox Extension Your command prompt should now have a new prefix containing the name of the SDK's root directory: (addon-sdk)user@user-Lenovo-B570e:~/addon-sdk$ Create firefox Extension The activate command sets some environment variables that are needed for the SDK. It sets the variables for the current command prompt only. If you open a new command prompt, the SDK will not be active in the new prompt until you type activate again. Initializing an empty add-on In the command prompt, create a new directory. The directory doesn't have to be under the SDK root: you can create it anywhere you like. Navigate to it, type cfx init, and hit enter: mkdir my-addon cd my-addon cfx init Create firefox Extension Folder structure of the add-on From the command cfx init automatically folders will be created their structure will be like my-addon/
  • data/
  • lib/ main.js
  • test/
  • package.json
Data This folder contain images and all the other javascript,html etc files. At the creation of the folder this folder is empty. Lib This folder contain and is created at the time of initialization main.js file. this the the main file from where the the program start from here you can refer other file for functionality in the data folder. Test This folder contain a test.js file which test that add-on . you can use this command to test . cfx test
  • package.json
The package.json file contains manifest data for your add-on, providing not only descriptive information about the add-on for presentation in the Add-ons Manager, but other metadata required of add-ons. Some of its entries, such as icon, name, and description, have direct analogues in the install manifest format, and entries from package.json are written into the install manifest when the add-on is built using command cfx xpi . Others, such as lib, permissions, and preferences, represent instructions to the cfx tool itself to generate and include particular code and data structures in your add-on. Create a firefox Extension Implementing the add-on Now you can write the add-on's code, which goes in the "main.js" file in your "lib" directory. This file was created for you in the previous step. Open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.ActionButton( id: "mangocoders", label: "Visit mangocoders", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onClick: handleClick }); function handleClick(state) { tabs.open("http://www.mangocoders.com/"); } To run and try the add-on use : cfx run Create firefox Extension
Packaging add-on :
When you've finished the add-on and are ready to distribute it, you'll need to package it as an XPI file (xpi is like a zip file). This is the installable file format for Firefox add-ons. You can distribute XPI files yourself or publish them to https://addons.mozilla.org so other users can download and install them. To build an XPI, just execute the command : cfx xpi Create firefox Extension