Making Firefox Add-Ons Using CFX Tool

Making Firefox add-ons is easy. One only have to know HTML, CSS, and JavaScript to develop firefox addons/extensions.

I am going to use the cfx tool for creating firefox add-ons. You can download the Add-on SDK 1.17 directly in either zip format or tarball format.

Note: cfx has been deprecated,jpm should now be used instead. We'll cover jpm on some later posts.



cfx enables us to test, run and package add-ons.

cfx usage:

cfx [options] command [command-specific options]

We only need to know three cfx commands right now to make our first firefox add-on. These are:

• cfx init
• cfx run
• cfx xpi

cfx init is used to initialise the files and folders for our add-on. cfx run is used to run the add-on in firefox while all other add-ons are disabled. And cfx xpi is used to package the add-on into an xpi.

Now let's start making our first firefox add-on.

STEP 1

First download the Add-on SDK from the link above and then extract the file.

STEP 2

Open command prompt (if you're on windows) or terminal (if you're on linux) and navigate to the bin directory located in the extracted folder. And then type activate to activate the add-on sdk.

STEP 3

Now make a directory/folder and name it anything you want (this will be used to store the files of the add-on). And then navigate to the newly created directory/folder. And type cfx initThis will create all the necessary files and folders for our add-on. The directory structure will look like this:

my-addon   

• data
  
• docs        
  • main.md
     
• lib        
  • main.js
     
• package.json
  
• README.md
  
• tests        
  • test-main.js
     

STEP 4

Open the main.js file located in the lib directory. And edit the content of the file to the following:

var { ToggleButton } = require("sdk/ui/button/toggle");

var button = ToggleButton({
    id: "test_button",
    label: "Facebook Mobile",
    icon: {
        "16": "./icon-16.png",
        "32": "./icon-32.png",
        "64": "./icon-64.png"
    },
    onChange: clickFunction
});

function clickFunction(state){
    if(state.checked){
        panel.show({
            position: button
        });
        
    }
}

var panels = require("sdk/panel");

var panel = panels.Panel({
    width: 500,
    height: 600,
    contentURL: "https://m.facebook.com",
    onHide: handleHide
});

function handleHide(){
    button.state("window" , {
        checked: false
    });
}

This will make a toggle button and upon clicking on it it will show a website (here http://m.facebook.com) inside the panel. This is my first firefox add-on, you can find it at addons.mozilla.org

STEP 5

After writing the code and everything now it's time to export our firefox add-on. To do this we type cfx xpi in the command prompt/terminal.
You can find my completed addon here at addons.mozilla.org and also find my other addons here.
That's it for more info on developing firefox add-ons read the official documentation.