Building your first chrome extension: A beginner's guide
Tags: extension, chrome, browser, webstore
Published: 2019-09-11 20:04:11

---
title: Building your first chrome extension: A beginner's guide
published: true
description: A complete guide for building your first chrome extension
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ws5cyu898ij56j5rzwzm.png
tags: extension, chrome, browser, webstore
---

Recently I wrote my first chrome extension. In this post, I will walk through the main components of a chrome extension and my experience in building it and how you can build yours too.

## Table Of Contents
 * [What are Chrome extensions](#basics)
 * [Quick Launcher Extension](#about-quick-launcher)
 * [Main components of extension](#main-blocks)
 * [Load your extension](#load-extension)
 * [Debug your extension](#debug)
 * [Important APIs of Chrome](#important-apis)
 * [Publish to webstore](#publish-extension)
 * [Resources - Kick-start ](#resources)
 * [Conclusion](#conclusion)


## What are Chrome extensions? <a name="basics"></a>
Google Chrome Extensions are browser extensions that modify Google Chrome. These extensions are written using web technologies like HTML, JavaScript, and CSS. They are distributed through Chrome Web Store. So if you are a front-end web developer, building an extension would be easier for you. 

## Quick Launcher Extension(My extension) <a name="about-quick-launcher"></a>
![Quick Launcher chrome extension](https://thepracticaldev.s3.amazonaws.com/i/z0qus7ww74rvwqkb4jec.png)
**How I got the idea of building [Quick Launcher](http://bit.ly/2NWtboe)?** Actually I work at a startup and there are around 10-15 internal/external tools or sites or projects and each site has a different URL for different environments like for uat, staging, production, etc. It was a real pain to access a particular environment of a site from 30-40 URLs. Of course, I have the URL list saved in notes but to go there and get a particular URL from it was time-consuming. One solution was to bookmark the URLs. But already I have tons of links bookmarked. I wanted to separate the projects/tools links from the rest of my bookmarks and wanted to bundle or organize the links related to a particular project. And yeah, that's how the idea of building a chrome extension came to my mind.

### What is Quick Launcher?
[Quick Launcher](http://bit.ly/2NWtboe) is a smart URL organizer. A chrome extension especially for developers(can be used by non-developers too) to create collections of various related useful links. You can also add various apps deployed in different environments like uat, staging, production for quick access. Quick launcher also has a **Most Visited Sites** tab to quickly access sites that matter to you the most. 
### **Quick Launcher Features:**

### Collections:
![Quick Launcher chrome extension Collections](https://thepracticaldev.s3.amazonaws.com/i/zhch55nh3tgn6bthvraq.png)
Organize your various related links under a particular collection. You can add as well as delete a collection. After creating a collection, you can either add an item under it manually or right click on any website and choose collection name in the menu, you will be prompted to add a title after which you can save that link under that collection.

### Deployed Apps:
![Quick launcher chrome extension deployed apps](https://thepracticaldev.s3.amazonaws.com/i/4mc93883rzmnaw4bt2d5.png)
Quickly access sites/products/tools deployed in different environments like uat, staging, production. You can add deployment URLs of various sites/tools in JSON format to quickly access them. Currently supports 3 environments per site.

### Most Visited Sites:
![Quick Launcher chrome extension Most Visited tab](https://thepracticaldev.s3.amazonaws.com/i/56c7jef1yyxihwujase0.png)
Most visited sites tab to quickly access your most visited sites.

## Main components of extension: <a name="main-blocks"></a>
Extensions are made of different, but cohesive, components. Components can include [background scripts](https://developer.chrome.com/extensions/background_pages), [content scripts](https://developer.chrome.com/extensions/content_scripts), an [options page](https://developer.chrome.com/extensions/options), [UI elements](https://developer.chrome.com/extensions/user_interface) and various logic files. Extension components are created with web development technologies: HTML, CSS, and JavaScript.

### Manifest:
Extensions start with their [manifest](https://developer.chrome.com/extensions/manifest). It is a JSON file which provides information about your extension like name, version, description, etc.
Here is the example of manifest.json file:
{% gist https://gist.github.com/ankitverma31/0926c6e9c9aeaf4aa1841813d95f0f43 %} 

**Let's have a look of some important fields in manifest.json:**

`name`: Name of your extension
`description`: A short summary of your extension
`browser_action`: Used to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can have a tooltip, a badge, and a popup. [Read more..](https://developer.chrome.com/extensions/browserAction)
`default_popup`: The HTML file which pop-ups when the user clicks on your chrome extension in the toolbar.
`background`: Used to manage events. It contains the scripts of your extension. [More..](https://developer.chrome.com/extensions/background_pages)
There are other fields too in the manifest. To learn in detail about each field, check out the [documentation](https://developer.chrome.com/extensions/manifest).

### HTML file(popup.html):
{% gist https://gist.github.com/ankitverma31/321278124e1cba58970050985977cf2b %} 
`popup.html` as mentioned above, pops-up when the user clicks on your extension's icon in the toolbar.
### Popup Javascript file(popup.js):
{% gist https://gist.github.com/ankitverma31/c46e172e31e30f252043847c53f9a7a6 %} 
### CSS file(style.css):
{% gist https://gist.github.com/ankitverma31/981130bf3faf888dadd4bd030e3b823c %}
### Icons/Images:
You need to supply several kinds of images to be used in the Chrome Web Store and the Google Chrome browser:
1. App icon
2. Promotional images
3. Screenshots

Refer to the [official documentation](https://developer.chrome.com/webstore/images) to know more about images/icons requirements.

**So our final directory structure looks like:**
```
my-extension folder/
├── manifest.json
├── background.js
├── popup.js
├── popup.html
├── style.css
├── img
│   ├── icon_16x16.png
│   ├── icon_48x48.png
│   ├── icon_128x128.png
│   ├── icon_19x19.png
│   ├── icon_38x38.png
│   
```

## Load your extension <a name="load-extension"></a>
Once you are ready with the above folder structure, you need to test if everything is fine by loading it in the browser. To load your extension: 
1. Open Chrome browser and navigate to `chrome://extensions`
2. Enable Developer Mode by clicking the toggle switch next to **Developer mode**.
3. Click the **LOAD UNPACKED** button and select the extension directory.

## Debugging your extension <a name="debug"></a>
You can debug a chrome extension the same way you debug a normal website using chrome dev tools/inspect elements. To debug your extension:
1. Open Chrome browser and navigate to `chrome://extensions`.
2. Locate your extension and copy the extension **ID**
3. Open the URL `chrome-extension://ID/popup.html`.
4. Use the dev-tools(<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd>) to debug it. [Read more..](https://developer.chrome.com/extensions/tut_debugging)

## Some useful APIs of Chrome <a name="important-apis"></a>
Let's check out some important APIs I have used for building quick-launcher extension:
### Storage:
In Quick Launcher extension, I have used sync storage to save the `collections JSON object` and `deployed apps environments` which is added by the user.
Chrome Apps can’t use `localStorage`. Instead, there’s a Chrome API, `chrome.storage.local`, that’s better: it can store JavaScript objects (localStorage is limited to strings) and, like most Chrome APIs, it operates asynchronously, allowing the app to be more responsive. What’s more, there’s a variant, `chrome.storage.sync`, with the same API, which is automatically synchronized between computers running the same app, similar to the way that Sync Files are synchronized. Learn more about [storage](https://developer.chrome.com/apps/storage).
### Context Menus:
When you right-click(or control-click on a Mac) with the mouse pointer inside a Chrome App window, you get a menu with some debugging options, such as `Reload` App or `Inspect Element`. That is called the context menu. You can have your own menu option on that menu along with click listener. In Quick Launcher, I have added `Add to collections` menu which can be used by the user to add a URL under a particular collection. [Read more..](https://developer.chrome.com/apps/contextMenus) 

There are other dozens of API Chrome offers which you can use. Visit the [official developer guide](https://developer.chrome.com/extensions/devguide)

## Publish to webstore: <a name="publish-extension"></a>
![Chrome extension developer dashboard](https://thepracticaldev.s3.amazonaws.com/i/tg9g4zougldcuhmzxni4.png)
Once you are done with the development part, its time to publish your chrome extension to the webstore. To publish your extension:
1. Visit [Developers Dashboard](https://chrome.google.com/webstore/developer/dashboard)
2. Sign in(if asked)
3. Click on `Add new item`, accept the TnC
4. Compress your folder to `my-extension.zip` and upload the zip file
5. If it is your first app, you will be asked to pay a one-time fee which is **$5**.

After completing the above steps, you will have to fill the form with description, add promotional images, screenshots, etc. Make sure you upload all the necessary images so your extension gets listed well in webstore. Check the [official documentation](https://developer.chrome.com/webstore/images) about image/promotional images requirements. Hit the **PUBLISH** button once you are done. It takes some times for your item to get visible on webstore.

## Resources - Kick-start: <a name="resources"></a>
1. [Overview of extensions](https://developer.chrome.com/extensions/overview)
2. [Getting started tutorial](https://developer.chrome.com/extensions/getstarted)
3. [Developers guide](https://developer.chrome.com/extensions/devguide)
4. [Quick Launcher Extension](http://bit.ly/2NWtboe)

## Conclusion: <a name="conclusion"></a>
So, its pretty simple to build a basic chrome extension as a developer. But it is definitely a challenge to build something creative among lakhs of existing chrome extensions. So, what are you waiting for? go build your chrome extension. If you are stuck, you can always visit the excellent [documentation](Developers guide).

Don't forget to share your work in the comment. Please spare a moment and try [my extension](http://bit.ly/2NWtboe). I would highly appreciate your positive [reviews](https://chrome.google.com/webstore/detail/quick-launcher/ejfnjjfimjllfmeohacobipgepnilapm/reviews). Also like/share the article if you really found it useful.

Got questions or feedback? Let me know in the comments!