A Firefox extension to add

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 2 months ago)

180 views

A Firefox extension to add
contacts, events and view
addresses

By

Vijay Rao under guidance of

Prof. Chris Pollett

Problem


A lot of communication happens on the web


Contacts and Events data are found on the web
and no automated tool exists to harness this
information


Users have mail clients such as Outlook or
Thunderbird already installed


Need something that harnesses this client


Viewing several addresses together and have
ability to add additional landmarks


State of the Art


Several applications such as “Contact Manager”
and “Contacts Sidebar” from Thunderbird exist
to manage contacts albeit manually


User manually types information such as name,
address, email etc into such tools to save it


To add events to the user’s calendar user has to
manually create an event or receive an invitation


Google toolbar detects addresses automatically
but the user can only view one address at a time

Solution


A Firefox extension that extends the
browser to perform some of the above
mentioned tasks


User selects portions of text from a
webpage and expresses intent to either
add a contact or an event


The extension automatically parses the text
to identify names, addresses and email
addresses and converts the data into
industry standard formats such as VCF or
ICS format


The standard exchange format makes it
compatible with any mail client such as
Outlook or Thunderbird.


Use Google Maps API to geocode
addresses that are parsed from a web page
and display them

Technology


Used the following technologies


XUL


XML User Interface used by Mozilla to render the browser. Can be
extended easily by providing overlays


XPCOM


A component object technology used by Mozilla that is similar to
Microsoft COM and exposes the internal functionality of the browser


Javascript


The scripting language used in the browser chrome to handle
events and programming


JSP


To display addresses on Google Maps

Initial Challenges
-

Technology


Firefox extension creation has great
documentation



Firefox modules such as XPCOM are poorly
documented



XPCOM exposes the underlying functionality of
Firefox


Had to dig the source code of Firefox to figure
stuff out


Used Regular Expressions but could get really
long and complex

Picture of source file

Initial Challenges
-

Parsing


Parsing web pages can get excruciating
painful


Dependant on the web designer’s coding
style


Navigating the DOM can get tricky due to
use of unnecessary elements in design of
the web page

Add Contacts


Parse Selected Text


Text could be of
several formats


Used Regular
Expressions for
STATE ZIP pattern to
identify addresses


Name

Street

City State Zip

Name

Street

City

State Zip

Street

City

State Zip

Phone

Email

Add Contacts (Cont’d.)


Example of Regex that was used to locate
a State Zip pattern. Other building blocks
were built around this pattern



/
\
b(AL|AK|AS|AZ|AR|CA|CO|CT|DC|DE|FM|FL|GA|GU|HI|I
D|IL|IN|IA|KS|KY|LA|ME|MH|MD|MA|MI|MN|MS|MO|MT|NE|
NV|NH|NJ|NM|NY|NC|ND|MP|OH|OK|OR|PW|PA|PR|RI|SC|SD
|TN|TX|VI|UT|VT|VA|WA|WV|WI|WY|AA|AE|AP)
\
b
\
b[0
-
9]{5}(
-
[0
-
9]{4})?
\
b/;

VCF Format


Industry standard format for exchange of
contact information


Defines all attributes of a person such as
Name, Address, Phone Number, Email etc


Recognized by all mail clients such as
Outlook, Thunderbird etc.

VCF Format Sample


BEGIN:VCARD


VERSION:2.1


N:Google Inc.


FN:Google Inc.


TEL;WORK;VOICE:650
-
253
-
0000


TEL;FAX:650
-
253
-
0001


ADR;WORK:;;1600 Amphitheatre
Parkway;Mountain View ;CA;94043


END:VCARD

Add Events


Parsing Selected Text to automatically
detect


What


What is the event about


When


When is the event supposed to happen


Where


Where is the event happening

Add Events (Contd.)


Example of a Regex that was used to
locate a date time pattern



((0?[1
-
9])|(1[012]))[/](0?[1
-
9]|[12][0
-
9]|3[01])[/](19|20)?
\
d
\
d
\
s
\
d
\
d?(:
\
d
\
d)?
\
s(AM|PM)(
\
s(to|TO)
\
s(((0?[1
-
9])|(1[012]))[/](0?[1
-
9]|[12][0
-
9]|3[01])[/](19|20)?
\
d
\
d
\
s)?
\
d
\
d?(:
\
d
\
d)?
\
s(AM|PM)
)?/

ICS Calendar Format


Industry standard format for exchange of
calendar data such as events


Defines attributes for the When, Where
and What


Can specify rules for recurring events


ICS Calendar Format Sample

BEGIN:VCALENDAR

BEGIN:VEVENT

DTSTART:20080517T093000

DTEND:20080517T213000

LOCATION:233 W Santa Clara Street San Jose, CA 95113

DESCRIPTION:5/17/08 9:30 AM to 9:30 PM

\
n
\
nDetox Secret's Revealed One Day
Workshop
\
nDetox Secret's Revealed One Day Workshop
\
nWhether you're just starting out in the
health and diet arena, or you consider yourself a health expert, what I've found is that everybody
needs a little support and guidance. You may want to take better care of yourself but feel like
you're too busy to achieve optimal health & vitality. In fact, you might feel like you take 1 step
forward and 3 steps back when it comes to achieving optimal health. All my life, I struggled with
food, weight and body image. I know what it feels like to look in the mirror and not...
\
n

Hedley
Club
-

Hotel De Anza
\
n233 W Santa Clara Street
\
nSan Jose, CA 95113

SUMMARY:Detox Secret's Revealed One Day Workshop

BEGIN:VALARM

TRIGGER:
-
PT15M

ACTION:DISPLAY

DESCRIPTION:REMINDER

END:VALARM

END:VEVENT

END:VCALENDAR

View Addresses


Works with Tabular display of addresses


View all addresses in a cluster on Google
Maps


View them in context of other landmarks


Gives the user a context of reference to
the addresses he is looking at

View Addresses (Contd.)


Example of a regex that was used to
detect addresses on a web page



\
d+
\
s[
\
w
\
s]+
\
b(AVENUE|AV|AVE|WY|WAY|TE|DRIVE|DR|CO
URT|CT|Boulevard|Blvd|Road|RD|Street|ST|LANE|LN|TL
|EL CAMINO REAL|Highway|HWY)
\
b

Conclusion


Several challenges were involved such as parsing of
information and detecting patterns in web pages


Contacts and Events can now be automatically parsed
and saved with a mere right click on the browser


Ability to add contacts and events as an extension to the
browser while leveraging the user’s mail client makes the
browser a natural extension to the user’s browsing
experience


Viewing addresses on Google Maps makes it very
inituitive as the user is no longer dependant on the
website’s ability to show the address on a map

Demo


View Demo

Bibliography


Jonah Bishop Firefox Toolbar Tutorial Retrieved May 01, 2008 from


http://www.borngeek.com/firefox/toolbar
-
tutorial/


Mark James Retrieved May 01,2008 from


http://www.famfamfam.com/lab/icons/silk/


Jan Goyaverts (28th Aug 2007) Regular Expression Tutorial Retrieved May 01,


2008 from
http://www.regular
-
expressions.info/tutorial.html


Internet Mail Consortium Retrieved May 01, 2008 from


http://www.imc.org/pdi/vcard
-
21.txt


Internet Mail Consortium Retrieved May 01, 2008 from


http://www.imc.org/pdi/vcal
-
10.txt


Captain's Mozilla XUL LOG Firefox Toolbar tutorial Retrieved May 01, 2008


from
http://www.captain.at/programming/xul/


Google Map APIs Retrieved May 01, 2008 from


http://code.google.com/apis/maps/


John Resig (2006) Pro Javascript Techniques Apress


Mozilla Developer Center XUL Overlays Retrieved May 01, 2008


http://developer.mozilla.org/en/docs/XUL_Overlays


Mozilla Developer Center XPCOM Retrieved May 01, 2008


http://developer.mozilla.org/en/docs/XPCOM


Q&A


Thank You