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.
The WebExtensions API
The WebExtensions API provides a large number of ways to hook into web browsers. We’ll focus only on some of the most commonly used APIs (and the ones I’m most interested in) but you can find a full WebExtensions API reference on MDN.
You’ll also want to take a look at the compatibility chart on MDN to see which browsers have implemented which portions of the API.
- alarms – Schedule code to run.
- bookmarks – Create bookmarks, retrieve existing, edit, remove, organize, etc.
- browserAction – Add a button to the browser toolbar.
- browserSettings – Allows overriding a number of global browser settings.
- browsingData – Allows for clearing data such as the cache, cookies, downloads, local storage, etc.
- commands – Listen for the user executing commands you have registered.
- contentScripts – Dynamically add/remove scripts to be inserted into pages.
- cookies – Get, set, and monitor cookies.
- events – Interact with certain browser events.
- extension, extensionTypes – Utilities relating to the extension.
- find – Find text in web page.
- history – Interact with browser history.
- i18n – Functions to help with internationalization.
- identity – Integrates with OAuth2 providers.
- management – Manage installed add-ons.
- menus (aka contextMenus) – Allows for modifying browser menus.
- notifications – Displays OS level notifications.
- omnibox – Customize behavior of omnibox.
- permissions – Request additional permissions at runtime.
- runtime – Allows communicating within one’s extension, to other extensions, and with native applications.
- search – Executes search with specific search engine.
- sessions – Allows one to list and restore tabs and windows.
- sidebarAction – Get and set properties of an extension sidebar.
- storage – Store, retrieve, and monitor data.
- tabs – Interact with browser tabs.
- webNavigation – Add event listeners to the various stages of navigating.
- webRequest – Add event listeners to the various stages of HTTP requests.
- windows – Interact with browser windows.
Other APIs include clipboard, contextualIdentities, devtools (.inspectedWindow, .network, .panels), dns, downloads, idle, pkcs11, privacy, proxy, theme, topSites, types, and so on.
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.
- Mozilla’s webextensions-examples.
- 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, 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). – Reviewed: 7/20.
- Google Chrome’s Official Extension Examples.
- 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. – Reviewed: 7/20.
- Chrome Extensions Examples – A GitHub repo with the code extensions from Google’s official examples. – Updated: 1/20 – Reviewed: 7/20.
- webext-options-sync – Stars: 61 – Updated: 6/2020 – Reviewed: 6/2020
- Allows one to easily set (for options) defaults, add auto-load/save, and sync between browsers.
- TinyWebEx – Stars: 6 – Updated: 2/2020 – Reviewed: 6/2020
- Logging, syncing, localizing, etc. helpers for extensions.
- UI Code for Chrome Extensions – Stars: 99 – Updated: 6/2018 – Reviewed: 6/2020
- For options/settings page.
- Options Page for Chrome Extensions. – Stars: 48 – Updated: 10/2018 – Reviewed: 6/2020
- Aids in creating a options page for an extension.
Starters / Boilerplate
- Web Extension Starter – Stars: 714 – Updated: 6/2020 – Reviewed: 6/2020.*
- React TypeScript Web Extension Starter – Stars: 424 – Updated: 6/2020 – Reviewed: 6/2020.*
- Also utilizes SCSS, Storybook, Jest, ESLint, Prettier, Webpack, and Bootstrap.
- React Chrome Extension – Stars: 277 – Updated: 5/2020 – Reviewed: 6/2020.
- Chrome Extension Webpack Boilerplate – Stars: 1.1k – Updated: 11/2019 – Reviewed: 6/2020.
Open Source Extensions
See our separate page with a lengthy list of open source extensions to learn from, use, and/or contribute to.
- Erika Tan. How to Create a Chrome Extension. freecodecamp, 2018.
- Jake Prins. How to Create and Publish a Chrome Extension in 20 Minutes. freecodecamp, 2018.
- Ire Aderinokun. Creating the Feature Queries Manager DevTools Extension. smashing magazine, 2018.
- Jennifer Wong. Creating My First Chrome Extension. 24 ways, 2018.
- Benjamin Young. WebExtensions 101. rollout blog, 2017.
- David Rousset. Creating One Browser Extension For All Browsers… Smashing Magazine, 2017.
- Evan Sangaline’s article on breaking out of the WebExtensions sandbox.
- Vincent Humeau’s Cross Browser Extensions with WebExtensions API – 101.
- Mozilla’s Discourse Forums on Add-Ons.
- Frederico Brigante’s Awesome List of WebExtensions. – Updated: 7/20.
- Awesome Chrome Extensions.
- Check My Links – Checks for broken links. 11/2019.