Write a Chrome extension in 15 minutes

If you fancy dipping a toe in the waters of app development, you could do much worse than starting with a foray into making a plugin – or extension as Google calls them – for Chrome.

Writing a simple extension is actually child’s play. It’s the equivalent of a quick dip in the shallow end, but there’s good reason for starting out this way. The world is increasingly moving towards apps and programming frameworks based around XML, HTML and their attendant web technologies, including JavaScript, CSS (cascading style sheets) and JSON (JavaScript object notation). And these are exactly what Chrome extensions are based on.

By taking a look at the process of writing a browser extension, you’ll be setting yourself in good stead for programming platforms and app structures you’ll encounter when you come to writing the app that will change the world.

We’ve chosen Google Chrome rather than one of the other major browsers for two reasons: its extension framework is by far the simplest, and Google’s own documentation is second to none. Once you’ve worked through this lightning-fast introduction, you can rely on the Google tutorials to take you through the next steps without leaving you confused.

Anatomy of a Chrome extension

You don’t need to download any programming environments or special widgets to get a simple extension up and running. A Chrome extension is, at heart, simply a web page presented via a slightly different mechanism. That means an extension can be as simple as a bit of standard schoolboy-level HTML, which will pop up when activated. You can get up and running very fast, then gradually extend the features and experiment with new things with just a bit of tweaking of files in human-readable text format.

Shiny Chrome

The nice thing about Chrome is it has developer support built in. If you fire it up, click the Tools menu (the spanner icon) and select Tools | Extensions, the standard extensions window pops up, from which you can add “proper” published extensions via download. But you’ll also notice a link on the right-hand side of the page labelled “Developer mode”. Click the “+” sign to expand the link and you’ll see an option to “Load unpacked extension”. This will allow you to load up your new extension from a standard folder on your hard disk, rather than one that’s been prepared for internet distribution – look at our step-by-step walkthrough to see how it’s done.

Your first extension

To write your first extension, you’ll need to do two things. First, create a manifest file. This is something you’ll come across in most web-orientated apps and it describes aspects including your extension name, what it does and where its resources are.

Second, only for an extra flourish, create an icon for your extension so that it will leave an indelible mark on the minds of your adoring public when they download it. The icon needs to be small, though: just 19 x 19 pixels. It can be in PNG or JPEG format. We’re using a scaled-down PC Pro logo for ours.

The manifest file for Chrome extensions is written in JSON. This is specifically designed to be an easily human-readable and editable file format for flexible data interchange between web-enabled apps. The JSON in our first manifest is simple, and extends to only five lines of actual code, with some curly braces thrown in:

{
“name” : “PC Pro Extension Test”,
“version” : “0.1”,
“description” : “An extension that does almost nothing.”,
“browser_action” : {
“default_icon” : “pcpro.jpg”
}
}

As you can see, the JSON format is easy to read, with each attribute name in quotes, a colon separator, and then the actual attribute data in quotes straight after it. A comma separates sets of attribute tags and data. The only two attributes that are actually required are the “name” and “version” data. The “browser action” attribute is where the clever bit happens.