To help illustrate how to develop WebExtensions, we maintain a repository of simple example WebExtensions at https://github.com/mdn/webextensions-examples. This article describes the extensions in that repository.
These examples work in Firefox Nightly: most work in earlier versions of Firefox, but check the strict_min_version key in the add-on's manifest.json to make sure.
If you want to try out these examples, you have three main choices:
- Clone the repository, then load the add-on straight from its source directory, using the "Load Temporary Add-on" feature. The add-on will stay loaded until you restart Firefox.
- Clone the repository, then use the web-ext command line tool to run Firefox with the add-on installed.
- Clone the repository, then go to the build directory. This contains built and signed versions of all the examples, so you can just open them in Firefox (using File/Open File) and install them permanently, just like an add-on you install from addons.mozilla.org.
If you want to contribute to the repository, send us a pull request!
|annotate-page||Displays a sidebar that lets you take notes on web pages.|
|apply-css||Adds a page action to the toolbar. Click the button to apply a red border using injected CSS. Click the button again to remove the CSS.|
|beastify||Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast.|
|bookmark-it||Adds a bookmark button to the toolbar. Click the button to toggle a bookmark for the current page.|
|borderify||Adds a solid red border to all webpages matching mozilla.org.|
|chill-out||Show a page action after a period of inactivity. Show cat gifs when the page action is clicked.|
|commands||Demonstrates using the commands API to set up a keyboard shortcut. The shortcut created is accessed using Ctrl+Shift+Y (Command+Shift+Y on a Mac).|
|context-menu-copy-link-with-types||Add a context menu option to links to copy the link to the clipboard, as plain text and as a link in rich HTML.|
|context-menu-demo||Demonstrates adding and manipulating context menu items using the contextMenus API.|
|contextual-identities||List, create, and remove contextual identities.|
|cookie-bg-picker||Allows the user to customize the background color and tiled pattern on sites the visit, and also saves their preferences via a cookie, reapplying them whenever they revisit a site they previously customized.|
|dynamic-theme||Dynamic theme example|
|embedded-webextension-bootstrapped||Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension.|
|embedded-webextension-sdk||Demonstrates how to use an embedded WebExtension to port from an SDK-based add-on.|
|emoji-substitution||Replaces words with emojis.|
|eslint-example||Demonstrates how to configure a WebExtension with eslint.|
|favourite-colour||An example options page, letting you store your favourite colour.|
|firefox-code-search||Demonstrates how to use the omnibox API.|
|forget-it||Demonstrates how to use the browsingData API.|
|google-userinfo||Demonstrates how to use the identity API.|
|history-deleter||History API demo: deletes history items for a given domain|
|latest-download||Shows the last downloaded item, and lets you open or delete it.|
|list-cookies||This extensions list the cookies in the active tab.|
|mocha-client-tests||This example shows two methods of testing a WebExtension: running tests from within the add-on, and running tests from the command line using Karma|
|native-messaging||Example of native messaging, including a Python application and a WebExtension which exchanges messages with it.|
|navigation-stats||Demonstration of the webNavigation API, showing basic stats about which pages you've visited.|
|notify-link-clicks-i18n||Shows a localized notification when the user clicks on links.|
|open-my-page-button||Adds a browser action icon to the toolbar. When the browser action is clicked, the add-on opens a page that was packaged with it.|
|page-to-extension-messaging||Demonstrates how a web page and a content script can exchange messages. Visit https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html for the demo.|
|permissions||Demonstrates optional permissions using the permissions API.|
|proxy-blocker||Uses the proxy API to block requests to specific hosts.|
|quicknote||Allows the user to make quick notes by clicking a button and entering text into the resulting popup. The notes are saved in storage.|
|selection-to-clipboard||Demonstrates how to write to the clipboard from a content script|
|stored-credentials||Performs basic authentication by supplying stored credentials.|
|tabs-tabs-tabs||Demonstrates tab manipulation: opening, closing, moving, zooming tabs.|
|theme-switcher||An example of how to use the management API for themes.|
|top-sites||Demonstration of the topSites API.|
|user-agent-rewriter||Demonstrates using the webRequest API to rewrite the User-Agent HTTP header.|
|webpack-modules||Demonstrates how to use webpack to package npm modules in a WebExtension.|
|window-manipulator||Demonstrates how to manipulate windows: opening, closing, resizing windows.|