Building Browser Extensions

Browser Extensions, at their best, can be pretty awesome. They can add powerful functionality to web browsers.

In the past if one wanted to support multiple web browsers one had to write multiple extensions. These days things have coalesced towards a single system called WebExtensions.

On this page I hope to collect and simplify what most of us need to know to create a WebExtension.

Big Topics

The Google Angle

Unfortunately, Google is a bit rogue on the WebExtensions front. You’ll need to use Mozilla’s polyfill to ensure the extension works in Chrome without changes. You could design the extension to work with Chrome since Mozilla understands the Chrome API calls. This latter method isn’t ideal from a standardization perspective.

Web Extension Documentation for Specific Browsers

Example Code

Helper Code

  • webext-options-sync – Stars: 121 – Updated: 7/2022 – Last Checked: 9/2022
    • Allows one to easily set (for options) defaults, add auto-load/save, and sync between browsers.
  • TinyWebEx – Stars: 6 – Updated: 5/2022 – Last Checked: 9/2022
    • Logging, syncing, localizing, etc. helpers for extensions.
  • UI Code for Chrome Extensions – Stars: 102 – Updated: 2/2021 – Last Checked: 9/2022
    • For options/settings page.
  • Options Page for Chrome Extensions. – Stars: 61 – Updated: 10/2018 – Last Checked: 9/2022
    • Aids in creating a options page for an extension.

Starters / Boilerplate

Articles

People Developing Extensions

  • Federico Brigante – Prolific extension author who has also created a number of tools for authoring extensions. – Last Checked: 9/2022.

Other Resources