Deliverable 1 -- Sample Firefox plugin

Description:

The first deliverable was to create a sample Firefox test plugin. I created a test plugin that allowed the user to enter a search criteria and the results were displayed. The following steps were done to create a test firefox plugin

Step 1 -- Creating the necessary directory structure

The first step to creating a firefox plugin is to create the right directory structure.The following image explains the directory structure

Step 2 -- Creating the install.rdf

The installer manifest is read by Firefox to get details about our extension. Here is the install.rdf

<?xml version="1.0"?>
<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">
        <!-- Required Items -->
        <em:id>tuttoolbar@borngeek</em:id>
        <em:name>Tutorial Toolbar</em:name>
        <em:version>1.0</em:version>
        <em:targetApplication>
            <Description>
                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                <em:minVersion>1.5</em:minVersion>
                <em:maxVersion>2.0.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>
        <!-- Optional Items -->
        <em:creator>Vijay Rao</em:creator>
        <em:description>An example toolbar extension.</em:description>       
        <em:homepageURL>http://www.borngeek.com/firefox/</em:homepageURL>
    </Description>
</RDF>

Step 3 -- Creating the chrome.manifest

The chrome manifest tells Firefox what packages and overlays is provided by our extension. Overlays are layers and extensions added to Firefox.

content tuttoolbar chrome/content/
overlay chrome://browser/content/browser.xul 
chrome://tuttoolbar/content/tuttoolbar.xul

Step 4 -- Creating the xul files

The xul file describes the layout and position of the toolbar. It contains various navigation and menu items that provide functionality to the toolbar The following is the root element of the overlay file

<?xml version="1.0"?>
<overlay id="TutTB-Overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<toolbaritem flex="0">
	<toolbarbutton id="TutTB-MainMenu" type="menu"
				       tooltiptext="Tutorial Toolbar Main Menu">
	  <menupopup>
	    <menuitem label="Google Home Page" accesskey="G" 
		      tooltiptext="Navigate to Google" oncommand="TutTB_LoadURL('http://www.google.com/')" />                     
	    <menuseparator />                        
	    <menuitem label="Born Geek Website" accesskey="B" 
		      tooltiptext="Navigate to Born Geek" 
		      oncommand="TutTB_LoadURL('http://www.borngeek.com/')" />
	  </menupopup>
	</toolbarbutton>
</toolbaritem>

The various XUL elements are added to XUL file to make up the UI component.

Step 5 -- Scripting the Tool

The following line at the top of the toolbar attaches a javascript file to the xul overlay. Javascript can now be used to select the xul elements with id the same way as DHTML. The following piece of code gathers the search terms and passes it to google

function TutTB_Search(event, type)
{
    // This variable will hold the URL we will browse to
    var URL = "";
    // This variable will tell us whether our search box is empty or not
    var isEmpty = false;

    // Get a handle to our search terms box (the <menulist> element)
    var searchTermsBox = document.getElementById("TutTB-SearchTerms");
// Get the value in the search terms box, trimming whitespace as necessary
    // See the TutTB_TrimString() function farther down in this file for details
    // on how it works.
    var searchTerms = TutTB_TrimString(searchTermsBox.value);

    if(searchTerms.length == 0) // Is the search terms box empty?
        isEmpty = true;         // If so, set the isEmpty flag to true
    else                        // If not, convert the terms to a URL-safe string
        searchTerms = TutTB_ConvertTermsToURI(searchTerms);
    // Now switch on whatever the incoming type value is
    // If the search box is empty, we simply redirect the user to the appropriate
    // place at the Google website. Otherwise, we search for whatever they entered.
    switch(type)
    {
    // Build up the URL for an image search
    case "image":
        if(isEmpty) { URL = "http://images.google.com/"; }
        else        { URL = "http://images.google.com/images?q=" + searchTerms; }
        break;
    // Build up the URL for a web search
    case "web":
    default:
        if(isEmpty) { URL = "http://www.google.com/"; }
        else        { URL = "http://www.google.com/search?q=" + searchTerms; }
        break;
    }
    // Load the URL in the browser window using the TutTB_LoadURL function
    TutTB_LoadURL(URL);
}