Diving into Google Chrome Extensions Development

Last Friday, I  joined CodeFest2 which is part of the AddOn Conference.

I decided to create an extension that will display additional information when browsing a Craigslist Housing Ad. The additional information includes displaying the address on a Google Map and listing businesses (restaurants, bars, groceries, and gyms) nearby. You can find my extension, Craigslist Housing Helper here.

I have never developed a browser extension of any kind before. However, I wasn't too intimidated having read that developing Google Chrome Extensions are very easy since it uses Html, Javascript, and CSS.

I started with the tutorial (link). It was very to follow and I literally had an extension running in 2 minutes.

I then proceed to working on my extension. I started with displaying the address of the Craigslist ad on a map. Luckily, one of Google's samples, Mappy, exactly does that. I only had to tweak the code on how it finds the address.

Next, I used Ajax to access Yelp's API. It was a simple javascript call and I was able to use JQuery.

I was able to get my extension running in less than 2 hours. I'm not sure how easy it would have been if I tried to develop one for Firefox. (Mozilla, however,  will be launching Jetpack soon that would allow developing of extensions using Html, Javascript, and CSS).

Here are some tips based on what I learned while developing my first Chrome Extension:

  • When testing your extension locally, there is no need to reload if you only made changes to the Html pages (e.g. background.html, popup.html). However, you need to reload if you made changes to the Javascript files.
  • If you have seen an extension that does some functionality of the extension you are developing, you can easily explore their code. Go to chrome://extensions and grab the Id of the extensions. Then go to C:Users{ your username }AppDataLocalGoogleChromeUser DataDefaultExtensions{ extension id } to browse the code.

image0

  • Use Javascript frameworks. I used JQuery for my extension. JQuery has a number of functions and shortcuts that will help you in development. Same thing with using other frameworks such as Prototype, YUI, etc. You can either download the source, add it to your extension directory  and include it in "content scripts" of your manifest.json file. Sample: "js": ["jquery-1.3.2.min.js", "content_script.js"]. Alternatively, you can use Google's Ajax Library and make sure you add "http://www.google.com/*" in the Permissions section of the Json manifest.

The next step for my extension aside from improving its UI is to have it automatically rewrite the Craiglist Ad and have Google Map and Yelp data appear in the same page. I tried it before but I had difficulty making the map work mainly because of the domain and Api Key conflict.

Also, modifying the content of the page is cumbersome since you can only do it on the content_script.js file. However, the Readibility extension seems to be doing something similar so I'll be looking at its code shortly.

Overall, I enjoyed developing Chrome Extensions. Being able to use Html, Javascript, and CSS is a definite plus. Google will expose more of Chrome thorough the API so expect more powerful extensions in the future.