plug in development through net beans

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

Mozilla Firfox Plugin Development Through NetBeans

Mozilla Firfox Plugin Development Through NetBeans

Author : K Praneesh Kumar Yadav (Mozilla Campus Rep. – VIT University) Date:20/09/2009 Queries @ : praneeshkumar@ymail.com

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

-----------------------------------------------------------------------------------------------------------------------------------------------------------

Hi… Welcome to PlugIn Devlopment Tutorial..! The following tutorial will guide you through various steps involved in developing plugins for Mozilla FireFox Web Browser using NetBeans.

Software Requirements:

IDE: NetBeans IDE 6.5.1 + Java : As a prerequisite for installing NetBeans (www.netbeans.org)

Plug Ins : FoxBean Plugin for NetBeans (http://www.teesoft.info) FireFox WebBrowser Offcourse !!! (http://www.mozilla.com/en-US/firefox/personal.html)

Miscellanious: - DOM Inspector (Firefox PlugIn)- XUL Editor ()

Starting off….

Step 1: Creating the Required Environment

Step:1.1 : - Install NetBeans version >= 6.5.1 so as to get all the necessary updated Editor Libraries, which are required for adding FoxBean plugin to NetBeans.

Step: 1.2:- Adding FoxBean Plugin (com-teesoft-foxbeans.nbm) to your NetBeans.

Select Downloaded .nbm file in your Computer

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

Step 2: Creating Your Own Plugin (here it is HelloWorld – donot give any space between words of your Plugin Name)

Step 2.1 :- Once the FoxBean plugin is installed you can find the following screen once you select “File -> New Project” in your NetBeans.

Select “Mozilla Addons -> Mozilla Addon Project” and click “Next”

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

Your FireFox AddOn Name Here !!

Screen Once You Click Finish !!

The Major Task – Open All Individual Files that you can find on the Left Pane and replace “{appname}” with “YourApplicationName”

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

The Maximum Version of Browser in which you want your plug in to run

<- Click Generate to Get This

Write Sample Description About Your Plug In Here !!

Your Name Here !!

Step: 2.2 :- Editing the files in “<default packages>”

“The following Screen Shots will guide through the Process of Editing the Files”

- install.rdf file contains all the details about the Plug In

- install.js file contains descriptions about the installation procedures for the particular Plug In

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

This Portion of File is Edited

- chrome.manifest file contains the detailed descriptions of the files that are needed during the execution of the plug in

Step 2.3 :- Editing the files in content package

- contents.rdf file contains the description of other files that the plug in is using. As the plug in has to be presented with the browser we have to overlay (or include) certain part of our code with browser files. All the browser files precede with “chrome:” extension (rounded in the above figure). Any other files that are required for our plug in can

be included here.

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

Few Details about the Plug In being developed

XUL – XML User Interface Language. This language is designed for handling User Interfaces for Mozilla Products. It is also an Open Source Project from Mozilla.org. All the User Interface components required can be designed with the help of this language. XUL Explorer, an application which helps to create user interfaces easily can also be used to generate the code and view preview of the UI being developed.

- overlay.xul is a XUL file that defines the interface for the current plug in. Any number of XUL files can be written for a plug in. Each file can represent different interface modules.

- the above file represents the initial file which overlays the browser menu with the current plug in’s name such that the plugin can be accessed.

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

refer “locale” section

- the command for action that has to be performed once the menu option for the current plug in is invoked i.e, whenever the user clicks the menu item for the current plug in the browser window the function onMenuItemCommand(event) is invoke. This function is in turn defined in

overlay.js – a java script file .

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

The overlay.js

Initially it shows errors as in here (->)

Replace the {appname} with name of your application and it sets right

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

Adding Your Code ----

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

Preferences

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

Skin

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

Editing build.xml

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}

THANK YOU

{© This Material is Distribued during “Hands on Session on Firefox Plugin Developmet” jointly organised by Mozilla Campus Representatives (Reps) & Computer Society of India VIT Univeristy Students Branch at VIT University, Vellore}