Four days back I started with a ‘wish’ for an easier access to one of my favorite online communities – Dailymile.  The use case was simple yet powerful.  I make dozens of visit to this community everyday to checkout what my friends are up to with their respective workouts; be it a randonneuring ride of 400km, a fast paced 10km run, climbing intervals from Sri Lanka or general random thoughts or pictures my buddies wanted to share.  I also am super curious to know what they have to say about my own workouts.  I must confess that the current process is not so difficult – all I need to do is get to the webpage and read through.  But here I was, four days back, wishing there were a little icon on my browser toolbar clicking which will show a nifty drop down window with clickable snippets of the details I am interested in.  Something like this.


Yes! Google made its Extension development so easy for an UI layman like me that exactly 4 hours after the idea I had version 1.0 out.  I was able to easily distribute it to fellow chrome users in the dailymile community and get their valuable feedback.  As we speak the version that we see on the left is 1.0.4, with some feature additions and bugs fixed.  Since I was brimming with ideas to make this extension better but not having enough time at hand to sit down and code it through I have decided to open source it through my regular Google Code channel and see whether someone else can help me out.  Are you listening?

A chrome extension is a powerful application that runs within the security sandbox of the browser.  As part of every chrome browser distribution, Google has packaged in all tools one needs to develop and distribute extensions.  These tools include a powerful packaging mechanism, rich set of extensions APIs, a debugger, a resource tracker through which you can inspect the DOM and various HTTP requests.

Chrome is the most comprehensive HTML 5 reference implementation out there with supports for local storage, audio, video, Canvas and many more.  The extensions API empowers you to take advantage of all these services to make your software as useful and intuitive to the end user as you want.  Clearly imagination is the limit in what an extension can do.

In this specific dailymile extension’s case all I am doing it to make an XMLHttpRequest to a hosted dailymile API that returns the data I want in a JSON format.  Through a JavaScript callback I then parse and dynamically paint the user interface.  If my user wants to see more details of the workout (or a note or an image), a click will open the data in its full glory on a chrome tab.  To achieve all this all I had to do was to write a manifest.json file that defines which are all the web resources I am going to access, what all browser permission I would need and finally what is the starting page of my extension.  While developing the extension browser allows me to load, test and debug from my development directory.  Once fully satisfied with the product I can package the extension into a .crx distributable using browser tools itself.  Once I have a CRX file I could either choose to host it on google chrome extensions library (to sign up as chrome extensions developer there is a nominal USD5 fee) or host on your own.  I decided to host it on my own through my Google Code page.  The packaging has a powerful addition of auto updating.  Once enabled all I need to do to get a newer version of my software to my current users is to change a file on an HTTP location that announces a new version is ready for download.  Chrome will check this file periodically and auto update.  I setup an auto updating for this extension as well.  Overall a very neat development, packaging and distribution system.  Very impressed.

Source code available @
svn checkout
Browse Source code here

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Post Navigation