Chrome Extensions

Create applications inside the Chrome browser with standard Web technologies: HTML, CSS and JavaScript.

Back when Netscape was a rising star in the high-tech world, cofounder Marc Andreessen announced that the browser was a new form of operating system, within which people could create applications. Rather than writing apps for Windows, or the Macintosh, or even Linux (a laughable idea back then), we would write them for the browser. This seemed like a far-fetched idea at the time, but it obviously has become the case. Today, it is the norm to speak of a "Web application", meaning something that is delivered via the browser, but whose code sits on a server. This is what I think of when someone says "Web application", and it has been a while since I really thought seriously about even writing a desktop application.

That said, there's certainly an advantage to working with desktop applications. They work more smoothly with other applications; they can interact with the filesystem, and they just have a more natural look and feel. This is changing, especially given the capabilities that HTML5 brings to the table and the ways that browsers are becoming integrated into the overall user experience, rather than being one of many applications running on the computer.

What I really like is the relative simplicity of creating a Web application, including using the technologies that are the Web's bread and butter—HTML, CSS and JavaScript—and which I use, at least for client-side development, on a day-to-day basis.

Firefox has offered developers the chance to write extensions for a long time. However, I must admit that I wasn't thrilled with the idea of learning an entirely new language and paradigm (Mozilla's XUL). The Greasemonkey extension for Firefox has long been a favorite of mine, making it possible for me to make client-side changes and customizations to Web sites of all sorts. But, it wasn't completely integrated into the browser, and it required installation and configuration beyond what most people are willing to accept.

Extensions in Google Chrome (or the open-source Chromium), by contrast, use Web technologies and are built in to the browser, making it truly possible to extend the browser in a number of different ways by loading packages of HTML, CSS and JavaScript.

This month, I look at the different types of extensions you can write with Chrome and consider when it's better to write an extension than a Web application, as well as show how to develop a simple extension of your own.

Creating an Extension

As I mentioned previously, a Chrome extension is a combination of HTML, CSS and JavaScript. There are different types of extensions; right now, let's concentrate on a browser extension, which puts an icon in the top-right corner of the browser, which produces a pop-up and also can interact with the contents of the browser window.

Creating an extension is actually quite simple and can be done from within any directory on your computer. Create a new directory, and in it, create a file called manifest.json. As the file extension indicates, this file (which gives Chrome information about your extension) is written in JSON (JavaScript object notation), which is natural and easy to pick up by anyone familiar with JavaScript. The manifest tells Chrome how to load the extension, what permissions it should have and what elements should be displayed within the browser window.

For example, here is a simple extension manifest for the extension I'm building for this article:

{
  "name": "ATF sample extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Description of my ATF sample extension",
  "browser_action": {
    "default_icon": "atf.png"
  }
}

As you can see, manifest.json contains a number of name-value pairs, as you would expect from a JSON or JavaScript object. The names are set by the Chrome extension standard document, and although most of the values are strings, there are cases when they will contain numbers (for example, the manifest_version), objects (for example, the browser_action) or even arrays.

According to the standard document (see Resources), the only required fields in manifest.json are "name" (containing the extension name) and "version" (indicating the extension version). However, Google also says that as of Chrome 18, "developers should specify 2" for the version number, and that seems like a reasonable idea to me.

Because this extension is a browser action, you need to specify this name-value pair, stating "browser_action" as the name and a JSON object as its value. That value, which can (and will) contain several additional name-value pairs, currently has just one, namely "default_icon", which indicates what icon should be displayed in Chrome's toolbar to the right of the address bar. default_icon is a string containing a filename, which should be a PNG graphic of the correct size (19x19) that represents your extension.

Once you have created manifest.json, create (or download) a 19x19 PNG icon, and put it inside the extension folder with the filename atf.png. With the extension directory, manifest.json and icon, you're now ready to load the extension into Chrome. Open your browser to chrome://chrome/extensions/—a special URL for extension management—and make sure the "developer mode" check box is set, so that you can load extensions without Google's permission and from your local disk. Once you have done that, a "Load unpacked extension" button should be available. Click on that, and then use the file-selection dialog to select the extension directory. (Don't select a file within the directory, but rather the directory itself.)

Once you have done this, your extension should show up in Chrome with the extension name, description and version number. If and when you update the extension, you can tell Chrome to reload it by clicking the reload link under the extension name.

Make the Extension Useful

Now that you've created a basic extension, let's try to make it useful. Extensions can do any number of things, from providing snapshots of other sites, to interacting with the overall browser environment, to interacting with the page currently being viewed.

Let's first create a pop-up. The manifest.json file already indicates what popup_icon will be. Let's add to that an HTML file, which then will be displayed when you click on your extension's icon. To do this, just set the "default_popup" value within manifest.json to the name of an HTML file within the extension directory. Then, create an HTML file with that name. For example:

{
    "name": "ATF sample extension",
    "version": "1.1",
    "manifest_version": 2,
    "description": "Description of my ATF sample extension",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    }
}

Notice I also have increased the version number of the extension to make sure I can keep track of which version was created when. (If you're using a version-control system, such as Git, you can keep a tag or a commit note indicating when you updated the version number.)