Building your first chrome extension: A beginner's guide

Ankit Verma — Wed, 11 Sep 2019 20:04:11 +0000

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.

What are Chrome extensions
Quick Launcher Extension
Main components of extension
Load your extension
Debug your extension
Important APIs of Chrome
Publish to webstore
Resources - Kick-start
Conclusion

What are Chrome extensions?

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)

How I got the idea of building Quick Launcher? 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 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:

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:

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:

Most visited sites tab to quickly access your most visited sites.

Main components of extension:

Extensions are made of different, but cohesive, components. Components can include background scripts, content scripts, an options page, UI elements and various logic files. Extension components are created with web development technologies: HTML, CSS, and JavaScript.

Manifest:

Extensions start with their 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:

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..
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..
There are other fields too in the manifest. To learn in detail about each field, check out the documentation.

HTML file(popup.html):

popup.html as mentioned above, pops-up when the user clicks on your extension's icon in the toolbar.

Popup Javascript file(popup.js):

CSS file(style.css):

Icons/Images:

You need to supply several kinds of images to be used in the Chrome Web Store and the Google Chrome browser:

App icon
Promotional images
Screenshots

Refer to the official documentation 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

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:

Open Chrome browser and navigate to chrome://extensions
Enable Developer Mode by clicking the toggle switch next to Developer mode.
Click the LOAD UNPACKED button and select the extension directory.

Debugging your extension

You can debug a chrome extension the same way you debug a normal website using chrome dev tools/inspect elements. To debug your extension:

Open Chrome browser and navigate to chrome://extensions.
Locate your extension and copy the extension ID
Open the URL chrome-extension://ID/popup.html.
Use the dev-tools(Ctrl+Shift+I) to debug it. Read more..

Some useful APIs of Chrome

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.

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..

There are other dozens of API Chrome offers which you can use. Visit the official developer guide

Publish to webstore:

Once you are done with the development part, its time to publish your chrome extension to the webstore. To publish your extension:

Visit Developers Dashboard
Sign in(if asked)
Click on Add new item, accept the TnC
Compress your folder to my-extension.zip and upload the zip file
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 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:

Conclusion:

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.

Don't forget to share your work in the comment. Please spare a moment and try my extension. I would highly appreciate your positive reviews. Also like/share the article if you really found it useful.

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

DEV Community: Ankit Verma