FlipKart

Friday 5 September 2014

Developing Addons for firefox browser

Steps to be followed :

1) Install python

2)Download Addon sdk
https://addons.mozilla.org/en-US/developers/builder

3) Addon sdk Installation on windows

Extract the file contents wherever you choose, and navigate to the root directory of the SDK with a shell/command prompt. For example:

c:/Mozilla> cd addon-sdk

Then run:

bin\activate

Your command prompt should now have a new prefix containing the full path to the SDK's root directory:

(C:\Users\mozilla\sdk\addon-sdk) C:\Mozilla\addon-sdk>


or

Addon sdk Installation on Mac OS X / Linux

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

Then run if you're a Bash user (most people are):

source bin/activate

And if you're a non-Bash user, you should run:

bash bin/activate

Your command prompt should now have a new prefix containing the name of the SDK's root directory:

(addon-sdk)~/mozilla/addon-sdk >


4) Develop the addon

Initializing an empty add-on

In the command prompt, create a new directory. Navigate to it, type cfx init, and hit enter:mkdir myaddon
cd myaddon 
cfx init




Navigate to lib folder of addon you have created and add the follwing code to main.js


data = require("sdk/self").data
 
var TextPanel = require("sdk/panel").Panel({
  width:325,
  height:330,
  contentURL: data.url("Flip-text.html")
});
 
require("sdk/widget").Widget({
  id: "open-textupsidedown-btn",
  label: "TextUpsideDown",
   contentURL: data.url("./fliptext.PNG"),

   width: 30,
  panel:TextPanel
});

Now,navigate to data folder and create a html file say  Flip-text.html





Here are the few cfx commnads which may be useful :
  cfx init
  cfx run
  cfx test
  cfx xpi

Few links useful for you
 Addons reference
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/panel 

Bug fixing
https://developer.mozilla.org/en-US/Add-ons/SDK/Guides/Contributor_s_Guide/Getting_Started

Links:
=====
[1] http://www.joshmatthews.net/fosdem/
[2] https://speakerdeck.com/sankha93/build-your-own-firefox
[3] https://developer.mozilla.org/en/Introduction
[4] http://www.joshmatthews.net/trainingmontage/
[5] http://whatcanidoformozilla.org/
[6] http://www.joshmatthews.net/bugsahoy/
[7] https://developer.mozilla.org/