Creating browser extensions is easier than I expected, but still has some challenging parts. A great way to start learning how to make extensions is the Chrome dev docs.

Creating your first extension requires a lot of trial and error. It gets easier as you learn how extensions work and how to use the browser APIs. On sites like Stack Overflow, many discussions have answers that make assumptions, such as that you’re creating a content script and so have access to the document variable (which is not accessible in background scripts). The assumptions in some answers are confusing at first, but this problem also gradually fades as you learn more.

Browser extensions are underrated: the promise of hackable software (2019) is a Hacker News discussion that covers the pros and cons of browser extensions, and similar tools such as bookmarklets and user scripts.

Unless you already have a very specific idea of what you want to create, I recommend reading the descriptions of the WebExtensions JavaScript APIs so you know what extensions are capable of.

browsers

An extension made for one browser might need few or no changes to also work in other browsers.

Releasing an extension on the Chrome Web Store makes it available not only to Chrome, but also to other Chromium-based browsers such as Edge, Brave, Vivaldi, and Opera. Firefox and Safari each have their own extension stores.

Publishing extensions on the Chrome Web Store requires a small one-time fee. If I remember correctly, it was $5 USD. Creating extensions for Safari appears to require using a Mac and being in the Apple Developer Program, which normally costs $99 USD per year in the United States. The Firefox extension store is completely free to publish to.

Some of the Chromium browsers also have their own extension stores despite allowing installing extensions from the Chrome Web Store, including Edge and Opera.

web-ext

web-ext is a command line tool created by Mozilla that helps with making extensions in various ways. For example, using web-ext run in an extension’s code directory will open Firefox with your extension already loaded, and web-ext run -t chromium does the same but with Chrome.

web-ext is also helpful for:

  • automatically detecting problems in some of the extension’s files with web-ext lint
  • packaging the extension into a .zip file without unnecessary files using web-ext build
  • signing an extension with web-ext sign if you want to self-host it

See web-ext command reference for more details.

examples

Also, reading the reviews of related extensions can be very helpful when deciding what features to create in your extension.

security

Successful extensions with many users are sometimes sold to data brokers who then change the extension to gather massive amounts of private data. This change is often impossible for the average user to detect since extensions usually update automatically and extension developers sometimes sell not just their extensions, but also their online accounts. Be careful about what extensions you install, and periodically make sure you don’t have any installed you don’t use anymore.

In Temptations of an open-source browser extension developer, Oleg Anashkin shares dozens of offers he has received (and declined) to monetize his extension, Hover Zoom+.

Here are a bunch of links to documentation, guides, etc. that I found helpful.

email client extensions

Some email clients are almost the same as browsers and also have extentions, such as Thunderbird.