Web Mashups using Firefox plugin Vijay Rao CS297 Report ...
[Pages:17]Web Mashups using Firefox plugin Vijay Rao
CS297 Report for
Prof. Pollet
1
Web Mashups using Firefox plugin ................................................. 3 1 Introduction .......................................................................... 3 2 Technology Involved .............................................................. 4 3 Deliverable 1 ? Sample Firefox plugin....................................... 5
3.1.1 Step 1 ? Creating the necessary directory structure ........ 5 3.1.2 Step 2 ? Creating the install.rdf.................................... 5 3.1.3 Step 3 ? Creating the chrome.manifest ......................... 6 3.1.4 Step 3 ? Creating the xul files ...................................... 7 4 The various XUL elements are added to XUL file to make up the UI component. ................................................................................ 8 4.1.1 Step 4 ? Scripting the Toolbar ...................................... 8 5 Deliverable 2 ? DOM Test ......................................................10 6 Deliverable 3 ? Block Element Highlight ...................................12 7 Deliverable 4 ? Saving web page contents on desktop ...............13 8 Conclusion ...........................................................................16 9 Bibliography .........................................................................16
2
Web Mashups using Firefox plugin
1 Introduction
The term Web Mashups was coined to describe applications that rely on data that is externally available; sometimes freely in terms of RSS feeds or webservices and can be used in another application thus creating a new type of application that is of tremendous value. As more users use the web there is a need for the user to be able to see the data in a multitude of different ways. A user viewing school API ranking information would like to see them with the house listings to see a house in a neighborhood of a good school. Another user would like to see the Megan's law database plotted on Google Maps to see sex offenders in his or her neighborhood. The options to see the data in context of other data is becoming more obvious and necessary.
I propose a Firefox application using XULRunner installed on the user's desktop and a firefox plugin that works in tandem allowing users to save portions or snippets of a web page. It will also allow users to add events to their calendar or add contacts by right clicking and selecting the text on a web page. Saved snippets which have addresses or locations on them can be viewed on Google Maps. The users can tag the snippets they want to save and categorize them. This will allow
3
users to mashup various sources of information together and view them in a consistent manner. The pages that previously had to be viewed independently can now be viewed in context of other pages.
2 Technology Involved
Client side technologies have improved a lot and modern browsers such as Firefox have a great framework in place to develop and deploy client side applications. Firefox has an elaborate framework in place to develop web based applications as well as client side applications.
Javascript
JavaScript is a client side scripting language that runs in all modern browsers today. It is run on the client machine and can be used to massage, validate and transfer data to the server. With the new way of sending data to the server called AJAX JavaScript has become more popular. Object Oriented JavaScript is also getting more mainstream as programmers are now more comfortable than before.
XUL
Firefox has a rich architecture where custom extensions and additions can be written with its extension framework. The framework uses various components such as XUL (XML User Interface Language), XPCOM (Cross Platform Component Object Model) and XPConnect
4
(allows connecting to XPCOM objects). XUL is an XML based user interface language that can be customized with custom graphics and layout that can be used to develop any internet or non-internet based applications. XUL can be controlled and manipulated using JavaScript and DHTML.
3 Deliverable 1 ? Sample Firefox plugin
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 3.1.1 Step 1 ? Creating the necessary directory structure The first step to creating a firefox plugin is to create the right directory structure.
Fig 1 ? Directory Structure for Firefox Plugin
3.1.2 Step 2 ? Creating the install.rdf The installer manifest is read by Firefox to get details about our extension. Here is the install.rdf
5
tuttoolbar@borngeek Tutorial Toolbar 1.0 {ec8030f7-c20a-464f-9b0e-13a3a9e97384} 1.5 2.0.0.* Vijay Rao An example toolbar extension.
Listing 1 ? install.rdf
3.1.3 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/
6
overlay chrome://browser/content/browser.xul chrome://tuttoolbar/content/tuttoolbar.xul Listing 2 ? chrome.manifest
3.1.4 Step 3 ? 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
Listing 3 ? tuttollbar.xul ? overlay
The following describes a toolbar item with menu dropdowns
Listing 3 ? tuttoolbar.xul
4 The various XUL elements are added to XUL file to make up the UI component.
4.1.1 Step 4 ? Scripting the Toolbar 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 element) var searchTermsBox = document.getElementById("TutTB-SearchTerms"); // Get the value in the search terms box, trimming whitespace as
8
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- push and pop in javascript example
- javascript breadth first search
- web mashups using firefox plugin vijay rao cs297 report
- javascript array api
- javascript data wrangling cheat sheet
- change array by copy for stage 2
- introducing assignment 0 a javascript crash course
- javascript immutability jfokus
- problem score points possible github pages
- ip javascript general library
Related searches
- firefox stopped working after update
- firefox bookmarks not working
- firefox rss feed not working
- mozilla firefox not responding windows 10
- unity web player plugin edge
- firefox menu bar unhide
- unity web player plugin firefox
- make firefox default browser windows 10
- alternatives to firefox and chrome
- download firefox for hp laptop
- firefox disable thumbnails
- mozilla firefox download windows 10