How to write mozilla extension

Introduction
A Mozilla extension is an installable enhancement to the Mozilla browser that provides additional functionality.For e.g firebug is one of the powerful extensions i have used. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page with it.

Extensions actually contains ZIP files or Bundles, with the XPI (pronounced “zippy”) file extension.

Basic Structure

An example of the content within a typical XPI file:
example.xpi:
/install.rdf
/chrome.manifest
/content/*.xul
/defaults/preferences/*.js
/locale/en-US/*.dtd *.properties prefwindow.dtd
/skin/*.css

Now we will create a folder for e.g. my_extension and create above files and folders inside it.

Creating install.rdf
Open install.rdf in text editor and add following lines to it.

<?xml version="1.0" encoding="UTF-8"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>format@email</em:id><!--unique for extension -->
<em:name>Name of extension (optional)</em:name>
<em:version>Version of extension (optional)</em:version>
<em:creator>Name of author (optional)</em:creator>
<em:description>Description of extension (optional)</em:description>
<em:homepageURL>Home page of extension (optional)</em:homepageURL>
<em:updateURL>Available updates location (optional)</em:updateURL>
<em:iconURL>Icon for extension in the format chrome://ifeed/content/*.png (optional)</em:iconURL>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- id of firefox -->
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>

Understanding the browser user interface
Firefox's user interface is written in XUL and JavaScript. XUL is an XML grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. User actions are bound to functionality using JavaScript.

To extend the browser, we modify parts of the browser UI by adding or modifying widgets. We add widgets by inserting new XUL DOM elements into the browser window and modify them by using script and attaching event handlers.
Open chrome://browser/content/browser.xul in your browser you will see the browser inside the browser
The browser is implemented in a XUL file called browser.xul ($FIREFOX_INSTALL_DIR/chrome/browser.jar contains content/browser/browser.xul). In browser.xul we can find the status bar, which looks something like this:

<statusbar id="status-bar">
... <statusbarpanel>s ...
</statusbar>

<statusbar id="status-bar"> is a "merge point" for a XUL Overlay.i.e we can create our own xul file to overlay our component on the status bar.


Example XUL Overlay

<xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World"/>
</statusbar>
</overlay>

Take this sample code above and save it into a new file called sample.xul inside the content folder you created

Create a Chrome Manifest
Open the file called chrome.manifest that you created and these lines to it

content example content/
locale example en-US locale/en-US/
skin example classic/1.0 skin/
overlay chrome://browser/content/browser.xul chrome://example/content/sample.xul

We have completed our hello world extension for mozilla. Now we will select the all files & folders (i.e. content,defaults,locale,skin,chrome.manifest,install.rdf) and create a zip file named example.zip. We will change the extension of example.zip to example.xpi

example.xpi is our extension now we can drag n drop example.xpi to firefox browser to install it.
Once it is installed it will ask to restart the browser.
After you restart the browser you will see Hello World in the right corner of your status bar.


References:
Extension Development Documentation
XUL Tutorials

For Help
Extension Development IRC

Compiling Program for Symbian OS using Visual C++ 6.0 Introductory Edition

Tools Required

1. Visual C++ 6.0 Introductory Edition



2. SDKs






• s60_2nd_sdk



• s60_2nd_fp2_sdk_msb






3. ActivePerl-5.6.1 or higher



4. JDK 1.6 or higher

OS

Windows XP

Tips

Make sure all the programs are installed in same drive

There is no space in the SDK's folder name
When you add some thing to environment variable always use ";" as separator

Steps

1. Install Visual C++ 6.0



2. Install Perl 5.6.1



3. Install JDK



4. Configure the path and environment variables






• Open My Computer > Properties Advanced > Environment Variables > System variables



• Add C:\Program Files\Java\jdk1.6.0_04\bin to the PATH variable.(for my case you give yours jdk's bin path)



• Add .pl to PATHEXT variable if it exists and if it doesnot create a variable PATHEXT and add *.exe;*.pl( exe for internal commands and external commands to work)



• Copy the user variable's path (i.e. one on the top) and add to the system variable's path (i.e. one at bottom).It is very important otherwise later when we will compile our program it will show link.exe missing.





5. Perl setup usually associates perl scripts with perl. To check, My Computer > Tools > Folder Option > File Types. Go to pl extension, n check if it is setup. if not, create a new and make it to open with perl.exe



6. Now Test Java and Perl Go To run > cmd >




• Type java -version and see the output it must give the version of java installed


• Similarly type perl -version


• If its working then proceed further if not check environment variables





7. Now install sdk 2nd edition. the only reason to install this is for visual c++ 6 integration. there are two folders inside C:\Symbian\7.0s\Series60_v20\Series60Tools named 'applicationwizard' and 'epoctoolbar'.Copy them to some other location. we need this later.



8. Now uninstall the 2nd edition sdk. this sdk has a problem that the gui softwares need exactly 1.3.1 version of java and cant work with higher


9. Now Install any higher version of sdk (in our case, 2nd ed, fp2). higher versions usually have more examples and better documentations.


10. Add application wizard and epoctoolbar from 'applicationwizard' and 'epoctoolbar' folders we copied before. Instruction on how to install is given in the readme file in the folders.


11. Now go to run > cmd and type epoc and see if emulator opens if it doesnot open there is sdk is not installed properly so re-install sdk and follow the steps mention previously


12. Now create a project either from emulator directly or you can use visual c++. but both of them should create project in same workspace. Defaulf workspace is X:\Work (X = drive where sdk is installed).


13. .Start Visual C++ 6.0 and create an application using a wizard. Suppose the application is named Helloworld and is located at c:\Work\HelloWorld. Once the files are created, you can edit it, but lets first compile it


14. To complie either we can use visual c++ or command line




• To compile from visual c++ go to build and build app


• For command line Go To Run > cmd




1. Go to project's group folder. cd c:\Work\Helloworld\group


2. type "bldmake bldfiles"


3. to compile for emulator type, abld build wins udeb


• Meanings:




1. abld - build utility command


2. build - build the program


3. wins - for emulator


4. udeb - debug build (u means unicode)











15. Run emulator (debug) from emulator (in start menu > all applications > sdk). there is the compiled application at the bottom of the screen in emulator


16. to compile for cell phone type,





• abld build thumb urel or


• abld build thumb udeb




17. You will see few errors during compilation,this is because visual c++ we are using doesnot allow to create standalone application.
18. 
    
    
    
    • Go to X:\Work\HelloWorld\inc\ and create file a header file "BkCreate.h
    
    
    • And write following lines in it1
    
    dfkjkdasjkldsa
    
    • Now go to src folder and edit helloworldapp.cpp file
    
    
    • Add include "BkCreate.h" below the line include...
    
    
    • Now compile you will see 0 errors.
    
    
    
    
19. now go to X:\Symbian\8.0a\S60_2nd_FP2\Series60Tools\install folder n type makesis helloworld.pkg


20. helloworld.sis is created. transfer this to the mobile phone, install n run..


21. Now migrane is over so enjoy!!!