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: some work in earlier versions of Firefox, but check the strict_min_version key in the add-on's manifest.json to make sure.
A recommended way to install these add-ons is to use about:debugging, which was added in Firefox 45. With this, you can load the add-on straight from the directory so no zip or sign step is needed.
If you want to contribute to the repository, send us a pull request!
beastify
https://github.com/mdn/webextensions-examples/tree/master/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.
Manifest keys
JavaScript modules
Bookmark it!
https://github.com/mdn/webextensions-examples/tree/master/bookmark-it
A simple bookmark button
Manifest keys
JavaScript modules
borderify
https://github.com/mdn/webextensions-examples/tree/master/borderify
Adds a solid red border to all webpages matching mozilla.org.
Manifest keys
chill-out
https://github.com/mdn/webextensions-examples/tree/master/chill-out
Show a page action after a period of inactivity. Show cat gifs when the page action is clicked.
Manifest keys
JavaScript modules
commands
https://github.com/mdn/webextensions-examples/tree/master/commands
Press Ctrl+Shift+Y to send an event (Command+Shift+Y on a Mac).
Manifest keys
JavaScript modules
cookie-bg-picker
https://github.com/mdn/webextensions-examples/tree/master/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.
Manifest keys
JavaScript modules
context-menu-demo
https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo
Demonstrates various features of the contextMenus API.
Manifest keys
JavaScript modules
Emoji Substitution
https://github.com/mdn/webextensions-examples/tree/master/emoji-substitution
Replaces words with emojis.
Manifest keys
favourite-colour
https://github.com/mdn/webextensions-examples/tree/master/favourite-colour
An example options ui
Manifest keys
JavaScript modules
history-deleter
https://github.com/mdn/webextensions-examples/tree/master/history-deleter
History API demo: deletes history items for a given domain
Manifest keys
JavaScript modules
latest-download
https://github.com/mdn/webextensions-examples/tree/master/latest-download
Shows the last downloaded item, and lets you open or delete it.
Manifest keys
JavaScript modules
notify-link-clicks-i18n
https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n
Shows a notification when the user clicks on links.
Manifest keys
JavaScript modules
open-my-page-button
https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button
Adds browser action icon to toolbar to open packaged web page.
Manifest keys
JavaScript modules
page-to-extension-messaging
https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging
Visit https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html for the demo.
Manifest keys
quicknote
https://github.com/mdn/webextensions-examples/tree/master/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.
Manifest keys
JavaScript modules
tabs-tabs-tabs
https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs
A list of methods you can perform on a tab.
Manifest keys
JavaScript modules
user-agent-rewriter
https://github.com/mdn/webextensions-examples/tree/master/user-agent-rewriter
Adds browser action icon to toolbar to choose user agent string from popup menu.