Notes on making a Chrome Extension

Jeff posted on  (updated on )

Recently I made a browser extension for Chrome for the first time, in this article, I share some personal findings on how to structure the project for such extension.

By the way, my extension Your App Store spending can be downloaded from Chrome Web Store.

How about other browsers? Currently some of the most popular browsers are based on Chromium, like Google Chrome and Microsoft Edge. Chromium-based extensions (like this one) should work on all of them with only minor tweak. Firefox is probably slightly more different, I didn't look into that. We don't talk about Apple Safari here.

Since I only test my extension on Chrome, for the rest of article I will only talk about extension for Chrome.

Structure of a Chrome extension

In my extension, there are 3 important components (a component is like a self-contained coding project):

  1. manifest.json
  2. Service Worker
  3. Popup page

An extension can also have:

  1. Option page
  2. Side panel

We will talk about each of them.

1. manifest.json

This is like ID card for your extension, it includes name and description of it, where to locate other components like Service Worker and popup page, etc.

Official docs here

2. Service Worker

Be careful, this is different from the Service Worker API for a normal website.

This component is like the brain of your extension, it's a long-living script that runs as soon as the browser launches, it's used to coordinate other components.

3. Popup page

It's actually called "Action": https://developer.chrome.com/docs/extensions/reference/api/action

I treat popup page like a standalone Single Page Application. In fact, I made my popup page using create-react-app (it is now deprecated, I don't know any alternatives), but you can use whatever fancy frontend stack you like.

If you want to talk with other part of extension, for instance Service Worker, use communication APIs (see "Communication between components" below).

4. Option page

I don't have this in my extension, but you can also create a option page for an extension.

To learn more: https://developer.chrome.com/docs/extensions/develop/ui/options-page

5. Side panel

I don't have this in my extension, but you can also create a side panel for an extension.

This is a new thing since Chrome 114 (released on May 24th 2023). To learn more: https://developer.chrome.com/blog/extension-side-panel-launch

Communication between components

Obviously, we will need to communicate between different components, like when user clicks a button on Popup page, and the Service Worker should start some background tasks.

There are 2 types of communication method available:

  1. Using message
  2. Using connection

To learn more: https://developer.chrome.com/docs/extensions/develop/concepts/messaging

Although on the site above, it says messages are for one-time requests and connections are for long-lived connections, I have yet to find something that can only be done in either. So feel free to only use either one I guess?