A Firefox extension to add contacts, events and view addresses

ByVijay 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|ID|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 detectWhat

What is the event aboutWhen

When is the event supposed to happenWhere

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 SampleBEGIN:VCALENDARBEGIN:VEVENTDTSTART:20080517T093000DTEND:20080517T213000LOCATION:233 W Santa Clara Street San Jose, CA 95113DESCRIPTION: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 WorkshopBEGIN:VALARMTRIGGER:-PT15MACTION:DISPLAYDESCRIPTION:REMINDEREND:VALARMEND:VEVENTEND: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|COURT|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