How to Create a Google Chrome Extension

23 Dec 2010

Creating an extension for Google Chrome is incredibly simple. With the knowledge of basic HTML and JavaScript, you can start building useful plugins in a matter of minutes.

This article will focus on creating the extension, and not on building the application. We will be using the todo list app I created in a previous tutorial. Read the tutorial here, and see the demo here.

The first step in creating an extension is to create a manifest file that will contain the details of your extension. Create a directory for your extension and create a file manifest.json there. Enter the following code into the file:

You will need to add an image to the folder and change the value corresponding to “default_icon” to the name of that file.

In Chrome, go to Options > Tools > Extension and then enable the developer mode. Click on “Load unpacked extension” button and select the folder that contains your manifest.json file. You will now be able to see your app’s icon in the top right, next to the wrench icon.

The next thing to do is to add the application. Get the code for the todo app from github, and save it as index.html. Now add "popup": "index.html" after the line containing default_icon in the manifest file and click on the reload link for this extension in Chrome’s extensions tab. The code should look like this now:

Hi, I’m Nithin Bekal.
I work at Shopify in Ottawa, Canada.
Previously, co-founder of
CrowdStudio.in and
WowMakers.
Ruby is my preferred programming language,
and the topic of most of my articles here,
but I'm also a big fan of Elixir.
Tweet to me at @nithinbekal.