Getting started with Chrome Extensions

Creating a dynamic chrome extension

Upon hearing that iGoogle was going to be mothballed by the omnipotent google (What's happening to iGoogle) those of us who have come to rely on iGoogle to support a variety of widgets and gadgets were left scratching our heads. One of the recommendations from google was to create a chrome extension as a replacement for gadgets.

The obvious drawback to this solution is that it is exclusively a chrome browser solution - the other problem was that I didn't know how to do it - nor what the options were.

A couple of hours of dev work and the result was a fully functional store available chrome extension.

How does the extension look in practice? The extension  - when added to the Chrome browser causes a small icon to appear next to the "favorite star" in the chrome browser. Clicking on this icon spawns a small pop up panel - which in turns loads logsitall content. There are two ways to setup the extension - one simply adds an icon the the favorites (extensions) that appear when a new empty tab is opened in chrome - the other adds the icon to the tool bar. I chose the tool bar option.

I was ahead of the curve a bit - since I had already created a mobile (small window) friendly version of logsitall - which turned out to be perfect to this application.

How to get started building a chrome extension that loads external content

1. First step is to visit the chrome developer site: https://chrome.google.com/webstore/developer/dashboard

This is where all the action happens - you upload your extension code (via a zipped folder) and then configure the listing options. In addition to name and keyword you can also attach a youTube video link to show the extension in action (highly recommended - use cam studio to create simple screencast files and then upload them to youTube).

2. Then you are ready to create the basic elements of the extension folder: manifest, icons and popup.

manifest.json:

{
  "name": "LogsItAll.com",
  "version": "1.1",
  "manifest_version": 2,
  "description": "LogsItAll.com",
  "browser_action": {
    "default_icon": "L-icon.png",
    "default_popup": "popup.html"
  }
}

popup.html:


For the pop i cheated - instead of trying to call remote content using js - i just used a simple iframe:


iframe width=375 height=590 src="http://www.logsitall.com/m"

(poor man's js/ajax...)


After that you just have to create the icons that your extension will call and add them to the folder on your computer that contains the various files. Zip them and then upload the finished zip folder using the developer site.

The only other important point is that there is a $5 fee to become a "google extension developer" and gain access to the store. Compared to apple dev fee this is a bargain.

The result? Too soon to tell - I think it is unlikely that hordes will find and use this extension - however it will be a nice service for a few hard core logsitall users.

Reference links:
1. https://chrome.google.com/webstore/developer/dashboard
2. http://code.google.com/chrome/extensions/getstarted.html
3. http://snippetspace.com/portfolio/iwebkit/ (create mobile web apps)

Good luck and happy coding.