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 somewhat towards a single system called WebExtensions.
Somewhat strangely, the amount of learning material available on creating browser extensions (particularly webextensions) is somewhat limited. 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 important ones (and 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.
Google has detailed documentation on their extension API.
Documentation for Browsers
- Opera’s Extensions Documentation.
- Microsoft’s Edge Extensions Documentation.
- MDN Web Docs – Add-ons – Browser Extensions.
- Official W3C Browser Extension Community Group.
- UI Code for Chrome Extensions – For options/settings page, last update 6/2018 as of 6/2019.
- Mozilla’s webextensions-examples has a large number of demo extensions available. A few of the ones I’m interested in are: annotate-page, bookmark-it, commands, context-menu-copy-link-with-types, export-helpers, favourite-color, find-across-tabs, forget-it, google-userinfo, quicknote
- Mozilla’s Browser Extension Development Tools.
- Mozilla’s web-ext CLI Tool.
- Mozilla’s Browser Toolbox – Allows for debugging extensions.
- Extensionizr – Generates boilerplate for an extension with desired functionality.
- WebExtension Toolbox – A cross-browser alternative to web-ext.
- WebExtension Toolbox Generator.
- react-chrome-extension-boilerplate – Unfortunately, this code is aging, no updates since 2/2018 as of 6/2019.
Real and Open Source Extensions
- Tabulator (1/2019) – Save open tabs to lists which can be reopened later.
- The Great Suspender (4/2019) – One of the most popular plugins, for tab management.
- Buttercup (2/2020) – Credentials manager.
- Epiboard (10/2019) – New Tab.
- Bookmark Search (8/2018) – A popular extension for searching one’s bookmarks.
- API Spots (2/2019) – Interact with APIs.
- Chrome Better Bookmark (4/2017) – Popular extension for managing bookmarks.
- I Hate Content Farms (6/2018) – For blocking specific content farm sites.
- Document Bookmarks (6/2018) – Allows one to add comments to bookmarks.
- Bookmark Express (4/2019) – Search through bookmarks.
- Bookmark Folder Suggester (3/2018)
- Bookmarks Manager (10/2018) – Quite popular.
- Chrome Plugins Manager (5/2019)
- Chrome Export History (4/2018) – As JSON or CSV.
- Clipboard History Manager (6/2019)
- Tabio (8/2018) – Tab manager.
- Tab Fern (5/2019) – Tab manager.
- Super Simple Highlighter (8/2017)
- Chrome Better History (4/2019)
- Enhanced History (11/2018)
- BetterTweetDeck (3/2019)
- Feedly Filtering & Sorting (6/2019)
- Floccus (6/2019) – Sync bookmarks using file sync software, quite popular.
- Popup My Bookmarks (6/2019) – Quite popular bookmark manager.
- REST Client (6/2019)
- Github Stars Manager (5/2018)
- Progress Bookmark (3/2016) – Saves the location on a page you were at when bookmarked.
- Quick Bookmark Cleaner (9/2018) – Project has been archived, so not actively maintained.
- Sprucemarks (4/2019) – Organizes bookmarks.
- Time Capsule – Reopens bookmarks at a future scheduled date.
- uBlackList – Blocks specific sites from appearing in Google’s search results.
- WikiMapper – Tracks one’s navigation history through Wikipedia.
- Chrome Bookmark Search – Popular.