To illustrate how to use the WebExtension APIs, we maintain a repository of example extensions at https://github.com/mdn/webextensions-examples. This article describes how to run these examples and lists the examples along with the WebExtension APIs they demonstrate.
These examples work in Firefox Nightly: most work in earlier versions of Firefox, but check the strict_min_version key in the extension's manifest.json to make sure.
Warning:
Some examples work only on specific domains or pages. Details of any restrictions are provided in each example's readme file. None of the examples work in private browsing windows by default, see Extensions in Private Browsing for details.
To try these examples, clone the repository, then install and run the extension using one of these options:
use the Load Temporary Add-on feature and open the extension from its source folder.
install web-ext, open the extension's source folder at the command line, and use web-ext run.
The extension stays loaded until you restart Firefox.
Warning:
Please do not submit these WebExtension examples to addons.mozilla.org (AMO); you do not have to sign the add-on WebExtension examples to run them.
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.
Allows the user to customize the background color and tiled pattern on sites they visit, and also saves their preferences via a cookie, reapplying them whenever they revisit a site they previously customized.
Demonstrates a generic way to request host permissions and register declarativeNetRequest rules to modify network requests, without any install-time permission warnings. The options_ui page offers a way to request permissions and register DNR rules.
Demonstrates multiple ways to redirect requests using the declarativeNetRequest API through the declarative_net_request manifest key. Demonstrates aspects of Manifest Version 3 (MV3): action, host_permissions, and web_accessible_resources, and includes a comparison with Manifest Version 2 (MV2).
Shows how to detect the page element at the cursor position and remove that element, or a parent element, from the page. This example includes use of the polyfill, illustrating cross-browser extension development.
Illustrates how to retrieve a list of search engines and issue a search request, using search engine details added to the context menu for selected text.
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.
