Making browser extensions in 2023

Thilina wrote this last year.

Getting started

First step is to decide which browser you want to develop the extension for. In February of 2023 over 80% of the desktop browser market share is dominated by Chromium-based browsers. Each browser has its own extension system, and the development process varies slightly between them. More on that later.

Next concern is the language of choice. The obvious candidate here is javascript. Here are some more detailed resources to get started:

Chrome extension development: https://developer.chrome.com/docs/extensions/
Firefox add-on development: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions
Safari extension development: https://developer.apple.com/documentation/safariservices/safari_app_extensions
Edge extension development: https://docs.microsoft.com/en-us/microsoft-edge/extensions/guides/creating-an-extension

CRXJS Vite Plugin

The CRXJS Vite plugin is a plugin for the Vite build tool that helps to streamline the development and packaging process for Chrome extensions. It allows you to use Vite’s fast and efficient build system to develop your extension and package it as a CRX file.

Vite is a modern build tool that is designed for frontend web development. It is fast and efficient, using a highly optimized build pipeline and a built-in development server. By integrating Vite with CRXJS, you can take advantage of these features to build your extension more quickly and easily.

The CRXJS Vite plugin provides a simple way to configure Vite for building Chrome extensions. It includes built-in support for TypeScript, SCSS, and other common web development technologies. It also includes features like hot module replacement and automatic reloading, which can help to speed up your development process.

Firefox support

At the time of writing CRXJS Vite plugin only focuses on chrome extensions. However in most cases, extensions written for Chromium-based browsers run in Firefox with just a few changes. The technology for Firefox extensions is, to a large extent, compatible with the extension API supported by Chromium-based browsers (such as Google Chrome, Microsoft Edge etc).

Here’s what I had to change in the built manifest.json from CRXJS

Firefox does not allow use_dynamic_url in web_accessible_resources because the resource URLs in Firefox are always dynamic. So I removed that property from manifest.json
All Manifest V3 extensions need an add-on ID in their manifest.json when submitted to AMO. I had to add https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#description to manifest.json. In order to make a consistent extension ID, I am using uuid-by-string package.

Testing

We can use puppeteer to test chrome extensions. It is a Node library that can be used for automating browser actions. However in order to load extensions we need to run puppeteer in non headless mode. Check puppeteer documentation here on how to load extensions.

Publishing extensions

Chrome

A one-time $5.00 fee is required in order to create a developer account in chrome web store.

If you are making extension for an organization, chrome extension group publishing allows organizations to publish extensions that are managed by a central administrator. Here are the steps to use chrome extension group publishing: Follow the guide

Firefox

Creating a developer account in AMO is free.

Add-ons on AMO can have multiple authors. Authors may be designated as owners or developers. Both types of author can update and manage the add-on and its listing, but only owners can add authors to the add-on. Follow the guide