Monday, February 15, 2010

8tracks Boombox Chrome Extension

Update: new version available http://seewah.blogspot.com/2010/02/8tracks-boombox-chrome-extension-update.html, which allows playback in the background, meaning you can now listen to mixes while working away!

Update: check out my second Chrome extension: Dim My Chrome http://seewah.blogspot.com/2010/02/dim-my-chrome-my-second-chrome.html, which uses more advanced features such as Content Scripts and Message Passing



Inspired by my friend George's excellent Twitter Reaction Google Chrome extension, I decided to take a proper look at Google Chrome extension. Unlike Firefox add-ons, Chrome extensions are written in pure HTML, Javascript and CSS which everyone already knows, although NPAPI is also supported. It also has cross-domain XHR support as well as HTML5 support such as local storage. Performance-wise, Chrome extensions are reputed to be faster and more stable (as each runs in its own process). In a way, Chrome extensions are more similar to Google Gadgets.

Anyway I don't mean to write a Firefox add-on vs Chrome extension comparison here :-) So back to business...

A site/service I have been digging big time recently is http://8tracks.com. So I thought I could try out their API and see what I can come up with in a form of a Chrome extension.

The result:

So voila! 8tracks Boombox: https://chrome.google.com/extensions/detail/pmdfenjjbfliihnjlcpifgaaehankhnj, an extension to let you search and play mixes. No more, no less...

Source can be found on GitHub.

Just some thoughts to share:

- Chrome extensions are dead easy to develop and deploy. I started writing the extension only after spending less than 30 minutes reading the doc. It really is just that simple!

- I used JQuery for all the DOM manipulation stuff, but relied on good old XMLHttpRequest for AJAX requests. I supposed I could have used JQuery for those as well.

- I used HTML5 localStorage for saving "last search" criteria - piece of cake to use.

- The extension popup closes as soon as the user clicks elsewhere, which is a bit annoying as that means users cannot really open a mix in the extension itself and work at the same time. The fact that the popup closes automatically is, I suppose, by design. I will see if I can figure something out. Any ideas welcomed! (See update at the top of the page)

- Finally, remember the extension will only run on Chrome, and go crazy and use all sorts of cool WebKit CSS styles!

Try out 8tracks Boombox and enjoy 8tracks :-)

Follow me on Twitter on get the latest updates.

No comments: