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 WebExtensions API – A dedicated page looking at aspects of the API used to build browser extensions.
- WebExtension Tooling – A dedicated page covering the various tools available to expedite browser extension development.
- Building WebExtensions with React – The title says it all, a dedicate page on using React to create browser extensions.
- Open Source Browser Extensions – An extensive list of oss browser extensions one can contribute to or learn from.
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
- Google’s Extensions Documentation.
- Opera’s Extensions Documentation.
- Microsoft’s Edge Extensions Documentation.
- Mozilla’s (MDN) Extensions Documentation.
- Mozilla’s Extension Workshop.
- Official W3C Browser Extension Community Group.
Example Code
- Mozilla’s webextensions-examples – Stars: 3.1k – Updated: 11/2021 – Checked: 1/2022.
- A few of the ones I’m interested in are: annotate-page, bookmark-it, commands (register keyboard shortcuts), context-menu-copy-link-with-types, contextual-identities, export-helpers (share JS objects between extension and webpage), favourite-color (uses storage.sync), find-across-tabs, forget-it, google-userinfo (authenticate using google), history-deleter (manipulate browser history), mocha-client-tests (unit testing), permissions (grant/revoke optional permissions), quicknote, user-script-register (integrate with third party scripts).
- Google Chrome’s Official Extension Examples – Stars: 9.4k – Updated: 1/2022 – Checked: 1/2022.
- A few of the ones I’m interested in are: My Bookmarks, History Override, Google Document List Viewer, Managed Bookmarks, Sample – OAuth Contacts, Optional Permissions – New Tab.
- Chrome Extensions Examples – Stars: 1.3k – Updated: 10/2021 – Checked: 1/2022.
- A GitHub repo with the code extensions from Google’s official examples.
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
- Web Extension Starter – Stars: 1.5k – Updated: 6/2022 – Reviewed: 9/2022.*
- Cross-browser, offers three branches: React + TypeScript, React + JavaScript, and HTML + JavaScript.
- Chrome Extension Webpack Boilerplate – Stars: 1.6k – Updated: 6/2021 – Reviewed: 9/2022.
- Offers branches both with and without React.
- browser-extension-template (notlmn) – Stars: 598 – Updated: 7/2022 – Checked: 9/2022.
- Barebones boilerplate with Parcel 2, options handler and auto-publishing.
- EmailThis’ Extension Boilerplate – Stars: 3.1k – Updated: 6/2017 – Reviewed: 9/2022.
- browser-extensions (trigger-corp) – Stars: 314 – Updated: 3/2019 – Checked: 9/2022.
- Build and run cross-platform browser extensions from one codebase.
Articles
- James Hibbard. Build a Chrome Extension to Streamline Your Workflow. sitepoint, 4/2020.
- SitePoint uses a browser extension to convert WP posts into markdown. Hibbard explains how to build the basics and there is a link to the github repo where the full extension is available.
- Erika Tan. How to Create a Chrome Extension Part 1. freecodecamp, 2018.
- Jake Prins. How to Create and Publish a Chrome Extension in 20 Minutes. freecodecamp, 2018.
- Fairly basic.
- Ire Aderinokun. Creating the Feature Queries Manager DevTools Extension. smashing magazine, 2018.
- This is a DevTools extension.
- Jennifer Wong. Creating My First Chrome Extension. 24 ways, 2018.
- Good overview.
- Benjamin Young. WebExtensions 101. rollout blog, 2017.
- David Rousset. Creating One Browser Extension For All Browsers… Smashing Magazine, 2017.
- While getting older this is one of the more detailed articles on the topic.
- Evan Sangaline. Breaking out of the WebExtensions sandbox. 9/2018.
- Sarah Drasner. How to Build a Chrome Extension. css-tricks, 5/2020.
- Covers the absolute basics.
- Marouane Rassili. How to Make a Chrome Extension – A Browser Plugin Development Tutorial. freecodecamp, 6/2020.
- Uses Parcel and Tailwind.
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
- Mozilla’s Discourse Forums on Add-Ons.
- Frederico Brigante’s Awesome List of WebExtensions. – Stars: 589 – Last Updated: 11/2021 – Last Checked: 1/2022.
- Awesome Chrome Extensions – Stars: 258 – Last Updated: 9/2021 – Last Checked: 1/2022.