Chrome is my browser of choice. Not only is it faster than all of the other browsers, it also offers a vast collection of available extensions to add on the browser to create a richer internet experience.

These extensions can be useful for fun and games, to improve productivity, or to help you quickly get to the information that is relevant to your life.

Now I can confess that I have spent a great deal of time browsing through and playing with the mass of extensions currently available on the chrome web store. This can be fun and enlightening the first time you visit the store. It really gives you a good sense of how fast the internet is changing and becoming increasingly useful.

Recently I embarked on a mission to explore creating my own extension app and I wanted to write an article to help others with the process. I will use the extension which I created as an example to help you create your own. This app is real simple and it is basically a table of photos of the 2012 MotoGP rider lineup. I thought this would be cool since the 2012 MotoGP season will be here shortly.

The extension simply displays in a table format, photos of the riders on their bikes wearing their 2012 livery. This extension incorporates some JQuery to zoom into the photos when clicked. It is a very simple app but these extensions can really become increasingly powerful the more time you invest into their development.

MotoGP Chrome Extension

Let’s get started

There are essentially three components you will need to create the extension, this is in addition to having the Chrome browser installed on your machine. The three ingredients are:

1. A JSON Manifest file
2. A 128 x 128 pixel icon representing your extension
3. An HTML web page for the content of your extension

The manifest file gives chrome information about your extension like the name, description, icon path and starting page path. The JSON is pretty easy to interpret :

JSON Manifest File:

{
“name”:”Mini MotoGP”,
“version”: “0.1”,
“icons”:{“128”: “icon.png”},
“description”: “Mini MotoGP”,
“browser_action”: {
“default_title”: “Mini MotoGP”,
“default_icon”: “icon.png”,
“popup”: “load.html”
},
“permissions”: [
“unlimitedStorage”,
“notifications”
]
}

The load.html file below embeds an iframe page which houses all the content of the application:

load.html File

<html>
<head>
<style>
body{
min-width:800px;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
</head>
<body>
<iframe src=”popup.html” width=”100%” height=”100%” frameborder=”0″></iframe>
</body>
</html>

The popup.html file is where the content of the extension exists. You don’t necessarily need to use an iframe, unless you will be referencing an external web page, but i did with this app just to keep it clean.

Now, to create a developer preview of your extension follow these instructions:

In chrome go to Tools -> Options -> Extensions, and at the top you will see a checkbox for Developer Mode. Check that box and then Load Unpacked Extension (you will point to the folder where you have your extensions files). Once you have loaded the unpacked extension, you should see your extension’s icon in your list of extensions.

To create a packed version of your app (one that you can host and distribute on your website) click Pack Extension and point Extension Root Directory to your apps folder. Do not worry about Private Key if you’re not updating an already packed extension.

To host your extension on the Chrome WebStore you will need to create a developer account and pay a $5 developer fee.

That should be it.

Below is the extension that I built if you’d like to try it out with chrome.

MiniMotoGP Chrome Extension