Monday, February 15, 2010

8tracks Boombox Chrome Extension

Update: new version available, 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, 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 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:, 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.

1 comment:

Cheerful Childrenc said...

You may also try this method to download 8tracks videos at