Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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!


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


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


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.

Manifest keys

JavaScript modules

Document Tags and Contributors

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