Example WebExtensions

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!


apply-css

https://github.com/mdn/webextensions-examples/tree/master/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.

JavaScript APIs


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.

JavaScript APIs


bookmark-it

https://github.com/mdn/webextensions-examples/tree/master/bookmark-it

Adds a bookmark button to the toolbar. Click the button to toggle a bookmark for the current page.

JavaScript APIs


borderify

https://github.com/mdn/webextensions-examples/tree/master/borderify

Adds a solid red border to all webpages matching mozilla.org.


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.

JavaScript APIs


commands

https://github.com/mdn/webextensions-examples/tree/master/commands

Demonstrates using the commands API to set up a keyboard shortcut. Thr shortcut created is accessed using Ctrl+Shift+Y (Command+Shift+Y on a Mac).

JavaScript APIs


context-menu-demo

https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo

Demonstrates adding and manipulating context menu items using the contextMenus API.

JavaScript APIs


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.

JavaScript APIs


embedded-webextension-bootstrapped

https://github.com/mdn/webextensions-examples/tree/master/embedded-webextension-bootstrapped

Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension.

JavaScript APIs


embedded-webextension-sdk

https://github.com/mdn/webextensions-examples/tree/master/embedded-webextension-sdk

Demonstrates how to use an embedded WebExtension to port from an SDK-based add-on.

JavaScript APIs


emoji-substitution

https://github.com/mdn/webextensions-examples/tree/master/emoji-substitution

Replaces words with emojis.


favourite-colour

https://github.com/mdn/webextensions-examples/tree/master/favourite-colour

An example options page, letting you store your favourite colour.

JavaScript APIs


history-deleter

https://github.com/mdn/webextensions-examples/tree/master/history-deleter

History API demo: deletes history items for a given domain

JavaScript APIs


latest-download

https://github.com/mdn/webextensions-examples/tree/master/latest-download

Shows the last downloaded item, and lets you open or delete it.

JavaScript APIs


list-cookies

https://github.com/mdn/webextensions-examples/tree/master/list-cookies

JavaScript APIs


native-messaging

https://github.com/mdn/webextensions-examples/tree/master/native-messaging

Example of native messaging, including a Python application and a WebExtension which exchanges messages with it.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/navigation-stats

Demonstration of the webNavigation API, showing basic stata about which pages you've visited.

JavaScript APIs


https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n

Shows a localized notification when the user clicks on links.

JavaScript APIs


open-my-page-button

https://github.com/mdn/webextensions-examples/tree/master/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.

JavaScript APIs


page-to-extension-messaging

https://github.com/mdn/webextensions-examples/tree/master/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.


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.

JavaScript APIs


selection-to-clipboard

https://github.com/mdn/webextensions-examples/tree/master/selection-to-clipboard

Demonstrates how to write to the clipboard from a content script


tabs-tabs-tabs

https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs

Demonstrates tab manipulation: opening, closing, moving, zooming tabs.

JavaScript APIs


user-agent-rewriter

https://github.com/mdn/webextensions-examples/tree/master/user-agent-rewriter

Demonstrates using the webRequest API to rewrite the User-Agent HTTP header.

JavaScript APIs


webpack-modules

https://github.com/mdn/webextensions-examples/tree/master/webpack-modules

Demonstrates how to use webpack to package npm modules in a WebExtension.

JavaScript APIs


window-manipulator

https://github.com/mdn/webextensions-examples/tree/master/window-manipulator

Demonstrates how to manipulate windows: opening, closing, resizing windows.

JavaScript APIs

Document Tags and Contributors

 Contributors to this page: wbamberg, andymckay-github, maybe
 Last updated by: wbamberg,