To help illustrate how to develop extensions, we maintain a repository of simple example extensions at https://github.com/mdn/webextensions-examples. This article describes the WebExtension APIs used 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 extension's manifest.json to make sure.

If you want to try out these examples, you have three main choices:

  1. Clone the repository, then load the extension straight from its source directory, using the "Load Temporary Add-on" feature. The extension will stay loaded until you restart Firefox.
  2. Clone the repository, then use the web-ext command line tool to run Firefox with the extension installed.
  3. 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 extension you would install from addons.mozilla.org.

If you want to contribute to the repository, send us a pull request!

Name Description JavaScript APIs
annotate-page Displays a sidebar that lets you take notes on web pages. storage.local
tabs.onActivated
tabs.onUpdated
tabs.query
windows.getCurrent
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. pageAction.getTitle
pageAction.onClicked
pageAction.setIcon
pageAction.setTitle
pageAction.show
tabs.insertCSS
tabs.onUpdated
tabs.query
tabs.removeCSS
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. extension.getURL
runtime.onMessage
tabs.executeScript
tabs.query
tabs.reload
tabs.sendMessage
bookmark-it Adds a bookmark button to the toolbar. Click the button to toggle a bookmark for the current page. bookmarks.create
bookmarks.onCreated
bookmarks.onRemoved
bookmarks.remove
bookmarks.search
browserAction.onClicked
browserAction.setIcon
browserAction.setTitle
tabs.onActivated
tabs.onUpdated
tabs.query
windows.onFocusChanged
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. alarms.clearAll
alarms.create
alarms.onAlarm
pageAction.hide
pageAction.onClicked
pageAction.show
tabs.get
tabs.onActivated
tabs.onUpdated
tabs.query
tabs.update
commands Demonstrates using the commands API to set up a keyboard shortcut. The shortcut created is accessed using Ctrl+Shift+U (Command+Shift+U on a Mac). commands.getAll
commands.onCommand
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. contextMenus.create
contextMenus.onClicked
tabs.executeScript
contextual-identities List, create, and remove contextual identities. contextualIdentities.query
tabs.create
tabs.query
tabs.remove
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. cookies.get
cookies.onChanged
cookies.remove
cookies.set
extension.getURL
runtime.onMessage
tabs.onActivated
tabs.onUpdated
tabs.query
tabs.sendMessage
devtools-panels Demonstrates some of the devtools APIs. devtools.inspectedWindow
devtools.panels
runtime.getURL
runtime.onMessage
runtime.sendMessage
tabs.executeScript
discogs-search Demonstrates adding a custom search engine with the chrome_settings_overrides key.
dynamic-theme Dynamic theme example alarms.create
alarms.onAlarm
theme.update
embedded-webextension-bootstrapped Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension. runtime.onMessage
runtime.sendMessage
storage.local
embedded-webextension-overlay Demonstrates how to use an embedded WebExtension to port from an overlay extension. runtime.onMessage
runtime.sendMessage
embedded-webextension-sdk Demonstrates how to use an embedded WebExtension to port from an SDK-based add-on. notifications.create
runtime.connect
runtime.onConnect
runtime.onMessage
runtime.sendMessage
storage.local
emoji-substitution Replaces words with emojis.
eslint-example Demonstrates how to configure an extension with eslint.
export-helpers Demonstrates how to use export helpers like cloneInto to share objects with page scripts. notifications.create
runtime.onMessage
runtime.sendMessage
favourite-colour An example options page, letting you store your favourite colour. browserAction.onClicked
runtime.openOptionsPage
storage.managed
storage.sync
find-across-tabs Demonstration of the find API. browserAction.onClicked
extension.getBackgroundPage
find.find
find.highlightResults
runtime.getURL
runtime.onMessage
runtime.sendMessage
tabs.create
tabs.query
firefox-code-search Demonstrates how to use the omnibox API. omnibox.onInputChanged
omnibox.onInputEntered
omnibox.setDefaultSuggestion
tabs.create
tabs.update
forget-it Demonstrates how to use the browsingData API. browserAction.onClicked
browsingData.remove
notifications.create
storage.local
google-userinfo Demonstrates how to use the identity API. browserAction.onClicked
identity.getRedirectURL
identity.launchWebAuthFlow
notifications.create
history-deleter History API demo: deletes history items for a given domain history.deleteUrl
history.search
pageAction.show
tabs.onUpdated
tabs.query
http-response Demonstrates how to rewrite HTTP responses using the webRequest.filterResponseData() API. webRequest.filterResponseData
webRequest.onBeforeRequest
imagify Using a sidebar, illustrates the use of file picker and drag and drop. A content script replaces the current page content with the chosen image. extension.getURL
runtime.onMessage
tabs.executeScript
tabs.query
tabs.sendMessage
latest-download Shows the last downloaded item, and lets you open or delete it. downloads.erase
downloads.getFileIcon
downloads.open
downloads.removeFile
downloads.search
list-cookies This extensions list the cookies in the active tab. cookies.getAll
tabs.query
menu-demo Demonstrates adding and manipulating menu items using the menus API. i18n.getMessage
menus.create
menus.onClicked
menus.remove
menus.update
runtime.lastError
tabs.executeScript
mocha-client-tests This example shows two methods of testing an extension: running tests from within the extension, and running tests from the command line using Karma runtime.onMessage
runtime.sendMessage
native-messaging Example of native messaging, including a Python application and an extension which exchanges messages with it. browserAction.onClicked
runtime.connectNative
navigation-stats Demonstration of the webNavigation API, showing basic stats about which pages you've visited. storage.local
webNavigation.onCompleted
notify-link-clicks-i18n Shows a localized notification when the user clicks on links. extension.getURL
i18n.getMessage
notifications.create
runtime.onMessage
runtime.sendMessage
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. browserAction.onClicked
tabs.create
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. browserAction.onClicked
permissions.getAll
permissions.remove
permissions.request
runtime.getURL
tabs.create
proxy-blocker Uses the proxy API to block requests to specific hosts. extension.getURL
proxy.onProxyError
proxy.register
runtime.onMessage
runtime.sendMessage
storage.local
storage.onChanged
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. storage.local
react-es6-popup This is an example of creating a browser action popup UI in React and ES6 JavaScript. tabs.query
selection-to-clipboard Demonstrates how to write to the clipboard from a content script
session-state Demonstrates how to retrieve extension-defined state state from restored tabs. menus.create
menus.onClicked
sessions.getTabValue
sessions.setTabValue
tabs.insertCSS
tabs.onCreated
tabs.onUpdated
tabs.query
store-collected-images Demonstrates how to use the idb-file-storage library to store and manipulate files in an extension. browserAction.onClicked
contextMenus.create
contextMenus.onClicked
runtime.onMessage
runtime.sendMessage
tabs.create
windows.create
stored-credentials Performs basic authentication by supplying stored credentials. storage.local
webRequest.onAuthRequired
webRequest.onCompleted
webRequest.onErrorOccurred
tabs-tabs-tabs Demonstrates tab manipulation: opening, closing, moving, zooming tabs. tabs.create
tabs.duplicate
tabs.getZoom
tabs.move
tabs.onMoved
tabs.onRemoved
tabs.query
tabs.reload
tabs.remove
tabs.setZoom
tabs.update
theme-switcher An example of how to use the management API for themes. management.getAll
management.setEnabled
themes A collection of themes illustrating:
  • weta_fade: a basic theme employing a single image specified in headerURL:.
  • weta_fade_chrome: the weta_fade theme implemented with Chrome compatible manifest keys.
  • weta_tiled: a theme using a tiled image.
  • weta_mirror: a theme using multiple images and aligning those images in the header.
  • animated: use of an animated PNG.
top-sites Demonstration of the topSites API. topSites.get
user-agent-rewriter Demonstrates using the webRequest API to rewrite the User-Agent HTTP header. extension.getBackgroundPage
webRequest.onBeforeSendHeaders
webpack-modules Demonstrates how to use webpack to package npm modules in an extension. runtime.onMessage
runtime.sendMessage
window-manipulator Demonstrates how to manipulate windows: opening, closing, resizing windows. windows.create
windows.getAll
windows.getCurrent
windows.remove
windows.update

Document Tags and Contributors

Tags: 
 Last updated by: wmacjnpc,