I recently wrote a couple of extensions for Google Chrome. Developing Javascript extensions for Chrome is attractive for a few reasons:
- Hosting is free (well, after a one-time $5 charge) on the Chrome Web Store. Hosting is always kind of an issue for someone like me – a hobbyist programmer with no budget and no web server. With the Chrome Web Store, your program is immediately present in a searchable index and installation is just a click for the user.
- All the Chrome extensions are essentially open-source! Well at least the client-side code – but most of the time, extensions only have a client-side. On my Win XP machine, Chrome stores installed extensions at C:Documents and Settings<User>Local SettingsApplication DataGoogleChromeUser DataDefaultExtensions. There are a bunch of weird directory names in there; each extension is automatically assigned a unique ID. You can find out the ID for a particular extension by going to the Extensions page: in the Chrome browser, click the wrench icon, Tools -> Extensions.
Javascript is kind of … wonky. But nice in its own way.
I had never done any Javascript programming before starting this project. Fortunately (like most languages) there is a plethora of free, useful tutorials on the internet.
First, I read through the Chrome tutorial on extensions. It’s a pretty cool little pop-up you create (well, cut and paste) that displays a set of pictures using Flickr’s API. Its simplicity and the realization of the two points mentioned at the top of this post encouraged me to make some extensions of my own.
Next I read through the W3 Schools Javascript overview. It covers the basics of the language. Most of what you expect is present in Javascript. One kind of weird thing is the handling of objects – pretty much every function is an object. Kind of threw me for a loop in my own code because “this.” didn’t always refer to what I thought it should. Lots of searching turned up some workarounds … here’s one of the more lucid explanations of doing OOP with Javascript.
The other thing that is quite different with Javascript, at least when it comes to building Chrome browser extensions, is its asynchronous nature. My extensions use the chrome.bookmarks API and pretty much every function returns to a callback. Meaning: the API function begins, but meanwhile the following code is executed. When the API function finishes, it calls the callback function. A different way of thinking than my usual, synchronous programming. I’m not quite used to it and my code is rather spaghetti-ish as a result.
My First Extension: Opening a Random Bookmark
My first extension, Random Bookmark, is almost pitifully simple. When the user clicks the button, this extension gets a list of the user’s bookmarks, chooses one at random, and opens it in a new tab. It’s so simple that I’ll post the guts right here.
chrome.bookmarks.search("http",goToRandom);
function goToRandom(bookmarks){
var r=Math.floor(Math.random()*bookmarks.length);
chrome.tabs.create({'url': bookmarks[r].url});
}
The “chrome.bookmarks.search” function will traverse the bookmark tree and (in this case) return anything that contains “http.” I did this to make sure I didn’t get any Folders in my “bookmarks” list – in Chrome, Folders and Bookmarks are both BookmarkTreeNode objects. After the “search” function completes, the goToRandom callback is called. A random integer r is chosen which is used as an index into the bookmarks list. “chrome.tabs.create” opens up the bookmark in a new tab, and we are done.
Extension #2: Visual Amazon Bookmarks
This one’s a bit more complex. But not too much more, conceptually. Visual Amazon Bookmarks scans through the bookmark tree for any “www.amazon.com” links. It screen scrapes each amazon.com product page for product name, image, price, rating, and description. Then it displays the results in an extension popup. Along the way, it scrapes and displays some recommendations – “Customers Who Bought This Item Also Bought” – based on the bookmarks the user has.
Here’s the “profit” part: when a user clicks on one of the links in the Visual Amazon Bookmarks popup, the browser goes to the Amazon page whilst registering my Amazon Associates key. So, if they end up purchasing the product, I get some $$$! Well, in theory at least. Nothing yet. But the extension has only been up for a few days and only has 9 users – and 3 of those are me, my wife, and my mom. 😀 Maybe it will take off, maybe not. I’m really not sure how many people store Amazon products in their bookmarks. I do, mainly for books I hear about and want to read one day. The Amazon Wishlist functionality pretty much does what my extension does, but it doesn’t display everything all on one page. I envision Visual Amazon Bookmarks being useful for quick comparison shopping, and maybe turning a forgotten “that looks cool … bookmarked!” from months ago into a sale today.
The extension uses pretty much my same screen scraping techniques I have talked about before, only with Javascript now instead of Python, obviously. I don’t really like this approach because it’s time consuming to find just the right regular expressions to use to extract the desired data, and if Amazon ever changes their layout then my extensions will break. A much better option would be to use web service API’s – something I will explore in the future.
I won’t post the code for these extensions here because you can get it in its entirety via the method mentioned at the top of this entry.
uniformly uninformative 