Building your first extension in Google Chrome from scratch

It is our programmers' desire to solve problems with our software. To achieve this, we have a lot of different tools to our disposal. The classical web application is one example of a great option for solving problems.

But today I want to introduce another more lightweight solution. With a browser extension, you can access your application faster than a web application. At the same time, they are cheaper since you won't need a domain or hosting.

It is also not that much harder than creating a normal web application. In this article, I will guide you through the process of creating your first browser extension.

Initiating The Project Structure

As every web project, you have to create the basic folder structure for your project first.

In case you don't want to follow along creating all the files. There is a GitHub repository where I put all the files that are needed. Just go here and download the files in order to get a head start.

dist
└── res
    ├── css
    ├── img
    └── js

The dist folder acts as a container for our whole extension. I'd also recommend putting your CSS, JavaScript and your images in the res folder.

Then you have to create your basic files which you will use every time.

• dist/manifest.json
• dist/index.html
• dist/res/css/style.css
• dist/res/js/popup.js

After you added all the files, your file structure should look like this.

dist
├── index.html
├── manifest.json
└── res
    ├── css
    │   └── style.css
    ├── img
    └── js
        └── popup.js

Now you have the basic structure as well as the basic files which are required for a working extension. In the next step, I will show you the files you created and explain what each of them is doing.

---

Manifest.json

The manifest.json is the brain of your extension. Here you have all the important data that Google Chrome needs.
The most important things that you will declare here are:

• basic information
• permissions
• default actions

Basic Information

This section of code gives a basic description of your extension. Here you give your application a name as well as a version. Then you can give a short description of your extension which can be seen in the extension store.
The manifest version shows which version of the manifest format you are using. Currently, Chrome recommends you to use version 2 as the first version was depreciated in January 2014.

{
    "name": "My Extension",
    "version": "0.1",
    "description": "This is what shows in the extension store",
    "manifest_version": 2
}

Browser Action

The browser_action defines the actual button you click on in the extension bar. Here you can specify icons, popups, tooltips, titles and other aspects of the button.
For now, the focus will be on the default_popup which defines the popup when you click the extension. So you have to link to the index.html that we created at the beginning.

"browser_action": {
    "default_popup": "index.html"
}

Permissions

The permission section gives you the option to ask your user for permission for different activities.
Common permissions are:

• activeTab: grants temporary access to the current site you are visiting
• history: allows access to your browser history
• notifications: allows the extension to display notifications

A complete list of permissions can be found at the Chrome developer website.

If you, for example, want to create an extension that is using the clipboard. Then you will need the clipboardRead and clipboardWrite permissions. You have to add them to your manifest.json and everything should be working.

"permissions": [
  "clipboardRead",
  "clipboardWrite"
]

Now that you have the user's permission you can read and write the user's clipboard.
After these steps, your manifest.json should look like this one.

{
  "name": "My Extension",
    "version": "0.1",
    "description": "This is what shows in the extension store",
    "manifest_version": 2,
    "permissions": [
        "clipboardRead",
        "clipboardWrite"
    ],
    "browser_action": {
        "default_popup": "index.html"
    }
}

Adding Content To Your Extension

To have a meaningful index.html you have to add some boilerplate code to it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
    <link rel="stylesheet" href="./res/css/style.css" />
        <title>My first extension</title>
    </head>
    <body>
        Our extension is working
    </body>
  <script src="./res/js/popup.js"></script>
</html>

With your index.html in place, you have all the basic files ready to go.
The last thing left to do is actually adding the extension to Google Chrome.

---

Adding Your Extension To Google Chrome

Adding your extension to Google Chrome is easy.

1. Go to chrome://extensions/ and activate developer mode in the top right corner.
2. Click the Load unpacked button in the top left.
3. Select your dist directory

You should now have a card with our extension as well as an icon in the extension bar.

Now you can click on the icon in the extension bar and you will be greeted by our index.html. If everything works, you can now build your extension like every other web project.

---

Summary

I want to summarize the basic steps that you took to get to a working extension.

1. create a basic folder Structure
2. initialize default files
3. link extension to the browser

I hope that everything is working for you so you can start building your own application. If you have any more questions, I do recommend the Chrome Developer website. They have information on nearly every aspect of developing Chrome Extensions.

You can also get the code from my GitHub repository.

This article was originally published on my own blog. I just recently published an article about my journey of creating a fully functional browser extension. If you want to read about it just click here.