How to create a Google Chrome extension

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:

{
  "name": "Todo List",
  "version": "1.0",
  "description": "A simple todo list.",
  "browser_action": {
    "default_icon": "todo.jpg"
  }
}

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:

{
  "name": "Todo List",
  "version": "1.0",
  "description": "A simple todo list.",
  "browser_action": {
    "default_icon": "todo.jpg",
    "popup": "index.html"
  }
}

Clicking on the icon will now open a small popup right below the icon with the Todo app. You can now add tasks to the todo list and they will be available when you reopen the browser later.

This was a quick introduction to show you how to create a simple Chrome extension. Take a look at Google Chrome extensions page, go through the documentation and start creating awesome extensions.