How to write your own Chrome extension

Writing a Chrome extension isn’t as complicated as you might at first imagine.

In fact, if you’ve dabbled in JavaScript and HTML before, you’ll have most of the knowledge and tools at your disposal. All you need to know is how to put it together, so Chrome can interpret it and make use of it.

Even if you’re new to coding, you’ll be able to follow this simple tutorial, and by the end of it you’ll have created an extension that lets you quickly look up facts using the open-source encyclopaedia, Wikipedia.

All you need is a text editor – we’ve used our current favourite, Sublime Text – a Google Chrome browser, and a paint application such as Paint.NET to design the icon for your extension.

Writing a Chrome extension: the basics

There are two different types of Chrome extension: a “page action” and a “browser action”. Icons for page actions appear within the omnibox address bar of Chrome and affect only the page that’s loaded into the currently displayed tab. An example of a page action is a button that allows you to subscribe to a page’s RSS feed.

Browser actions, on the other hand, work independently of the loaded page, and their icons appear outside the omnibox. Our Wikipedia extension is a browser action, an extension that we want to be available no matter which web page or tab we have open.

The first step in creating your Chrome extension is a straightforward one: create a folder where all the files can live. This can be anywhere on your PC or laptop, but it makes sense to put it somewhere you can get to easily, such as the desktop or My Documents folder.

Next, you need to create the text files that will contain the code. We’re creating the simplest Chrome extension possible, so all we need is a manifest file, a HTML file and a PNG file.

Create two new text files and rename them as follows:

manifest.json

displaypane.html

What do these files do? The manifest file is an instruction sheet. It tells Chrome what type of extension it is, its name, the version of the manifest file format you’re using, plus other important information, such as where the icon for the button lives and the various files the extension needs to run. The HTML file contains the code that tells the extension what to do or display when it’s clicked.

The PNG file is a 19 x 19-pixel image that will appear on the extension’s button in the toolbar. It’s best to keep your icon simple. We’ve used a single letter “W” and created the icon in Paint.NET.

Once you’ve designed your image, you can save it into the folder, naming the file icon.png, and then get on with populating the text files with the code you need. You can also create a 38 x 38-pixel image if you don’t want the icon to look fuzzy on high-resolution displays.

Writing a Chrome extension: the code

The manifest file is constructed using JavaScript Object Notation (JSON), which is a subset of the JavaScript programming language. As you can see from ours below, manifest files can be pretty basic. They contain a block of code, contained within curly brackets, which includes a number of settings,

or “fields”.

The only required fields are the manifest version and the name that you can see at the top of our block of code. In our manifest we’ve added a few extras. There’s a description field, a version-number field, and we’ve also told Chrome that the extension type is a browser action.