Chrome extension tutorial - hello world

Chrome extension is very powerful feature of Chrome browser and an extension can be very useful for performing various activities on a web page. This tutorial will cover building a basic hello world chrome extension where clicking on extension icon will open a hello world window.

This tutorial assumes that you have enabled Chrome extension development mode.

Create manifest.json

Create a directory hello-world and create manifest.json in that dir. Here is very basic manifest.json for hello world extension. Note that next we’ll need default popup and icon for the extension.

{
  "name": "Hello World",
  "description": "Hello World Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "browser_action": {
      "default_icon": "hello-16.png",
      "default_popup": "popup.html"
   }
}

Create default popup html and icon

We’ll use the following popup.html file.
```
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello world</div>
  </body>
</html>
```
The icon file including full source code is also hosted on github at the link hello-world. Place both of these files in hello-world directory.
Load the hello world extension in Chrome

Open chrome extension page by visiting chrome://extensions and then click on load unpacked extension and select hello-world directory.

Once extension is loaded, you will see hello world extension entry as shown below:
Run the extension

Look for the hello world extension icon in Chrome toolbar and click on it. You should be able to see a window popup containing hello world.
Source code

You can get the source code used in this tutorial from github hello-world.

Chrome extension tutorial – hello world

Create manifest.json

Create default popup html and icon

Load the hello world extension in Chrome

Run the extension

Source code

Suggested posts: