Example Firefox add-ons created using the WebExtensions API
JavaScript HTML CSS Python
Clone or download
Permalink
Failed to load latest commit information.
annotate-page Fixes for ESLint Jul 8, 2017
apply-css Fixes for ESLint Jul 8, 2017
beastify Improve content script injection (#240) Nov 1, 2017
bookmark-it Reflect bookmark state in icon title to make it accessible to screen … Jul 25, 2017
borderify Add note about content scripts not working om the AMO site (#160) Dec 12, 2016
build add in a syncing version of favourite color Mar 14, 2018
chill-out run eslint --fix . Jul 8, 2017
commands Demonstrate changing keyboard shortcut values (#347) Mar 22, 2018
context-menu-copy-link-with-types run eslint --fix . Jul 8, 2017
contextual-identities an example using contextualIdentities (#179) Feb 8, 2017
cookie-bg-picker Get document.html and document.body only when we need them Apr 28, 2017
devtools-panels fix: Update devtools.panels.create icon and panel urls to work correc… Jan 26, 2018
discogs-search Use a single manifest file for Firefox and Chrome (#236) Jun 23, 2017
dynamic-theme fix broken gecko entry (#295) Oct 6, 2017
embedded-webextension-bootstrapped more .eslintrc.json and fixes Jul 8, 2017
embedded-webextension-overlay Example: embedded webextension overlay (#249) Jul 19, 2017
embedded-webextension-sdk more .eslintrc.json and fixes Jul 8, 2017
emoji-substitution Fixes for ESLint Jul 8, 2017
eslint-example Use webextensions env from eslint (#218) May 11, 2017
export-helpers Typo fix in Heading (#328) Dec 14, 2017
favourite-colour add in managed example (#287) Oct 24, 2017
find-across-tabs create a find example (#284) Sep 21, 2017
firefox-code-search Add Omnibox API example (#164) Dec 16, 2016
forget-it Forget it (#183) Feb 22, 2017
google-userinfo Fixed match error (#360) Jun 8, 2018
history-deleter Add icons for history-deleter (#327) Dec 13, 2017
http-response add in simple http-response example (#281) Sep 15, 2017
imagify Selfify example (#251) Jul 20, 2017
latest-download Remove applications key wherever possible (#144) Nov 18, 2016
list-cookies Fixes for ESLint Jul 8, 2017
menu-demo Add some icons (#285) Sep 15, 2017
menu-labelled-open Make menus calls synch (#345) Mar 8, 2018
mocha-client-tests convert chrome. to browser. Issue #165 #166 (#262) Sep 11, 2017
native-messaging update to correct link on network-messaging readme (#334) Jan 17, 2018
navigation-stats add in navigation types (#305) Dec 8, 2017
notify-link-clicks-i18n Add fr_FR translation to notify-link-clicks-i18n (#223) May 24, 2017
open-my-page-button Make URL argument absolute (#154) Dec 8, 2016
page-to-extension-messaging run eslint --fix . Jul 8, 2017
permissions "permissions" project uses async function, it is ES8 (Fx52 and above) Jul 8, 2017
private-browsing-theme Use a valid version number for private-browsing-theme (#342) Mar 1, 2018
proxy-blocker Update `proxy-blocker` extension to be compatible with firefox 56+ (#260 Aug 11, 2017
quicknote more .eslintrc.json and fixes Jul 8, 2017
react-es6-popup Update react, webpack and babel packages as well as their configs (#337) Feb 9, 2018
runtime-examples add in a runtime example (#304) Nov 1, 2017
selection-to-clipboard Update README.md Nov 15, 2017
session-state Added a new example, session-state (#300) Oct 17, 2017
store-collected-images Add an indexedDB file storage example: image-reference-collector (#224) Jul 19, 2017
stored-credentials Example of the webRequest.onAuthRequired API (#206) Apr 14, 2017
tabs-tabs-tabs add in some reader mode fun (#303) Oct 27, 2017
theme-integrated-sidebar Add theme integrated sidebar example (#308) Nov 7, 2017
theme-switcher add in a theme switching example (#228) Jun 12, 2017
themes New theme examples (#248) Jul 20, 2017
top-sites example of using topSites and chrome_url_override (#176) Jan 31, 2017
user-agent-rewriter run eslint --fix . Jul 8, 2017
user-script Fix end tag in HTML fragment. (#355) Apr 23, 2018
webpack-modules update README (#330) Dec 28, 2017
window-manipulator add in titlePreface (#256) Aug 2, 2017
.eslintignore Add an indexedDB file storage example: image-reference-collector (#224) Jul 19, 2017
.eslintrc.json create a find example (#284) Sep 21, 2017
.gitignore Add node_modules to .gitignore Jul 8, 2017
.travis.yml Update eslint and .travis.yml (#259) Aug 11, 2017
CODE_OF_CONDUCT.md Fix links in code of conduct (#198) Mar 22, 2017
CONTRIBUTING.md Document examples.json (#365) Jul 23, 2018
LICENSE added LICENSE Aug 15, 2015
README.md Update examples.json, remove index from README (#301) Oct 25, 2017
examples.json Update examples.json Mar 22, 2018
package.json Update eslint and .travis.yml (#259) Aug 11, 2017

README.md

webextensions-examples Build Status

https://github.com/mdn/webextensions-examples

Maintained by the MDN team at Mozilla.

WebExtensions are a way to write browser extensions: that is, programs installed inside a web browser that modify the behaviour of the browser or of web pages loaded by the browser. They are built on a set of cross-browser APIs, so WebExtensions written for Google Chrome or Opera will in most cases run in Firefox or Edge too.

The "webextensions-examples" repository is a collection of simple but complete and installable WebExtensions. You can use the examples to see how to use the WebExtensions APIs, and as a starting point for your own WebExtensions.

For an index of all the examples, see the "Example extensions" page on MDN.

The examples are made available under the Mozilla Public License 2.0.

How to use "webextensions-examples"

To use the repository, first clone it.

Each example is in its own top-level directory. Install an example in your favourite web browser (installation instructions are below), and see how it works. Each example has its own short README explaining what it does.

To find your way around a WebExtension's internal structure, have a look at the Anatomy of a WebExtension page on MDN.

To use these examples in Firefox, you should use the most recent release of Firefox. Some examples work with earlier releases.

A few examples rely on APIs that are currently only available in pre-release versions of Firefox. Where this is the case, the example should declare the minimum version that it needs in the strict_min_version part of the applications key in its manifest.json file.

Installing an example

There are a couple ways to try out the example extensions in this repository.

  1. Open Firefox and load about:debugging in the URL bar. Click the Load Temporary Add-on button and select the manifest.json file within the directory of an example extension you'd like to install. Here is a video that demonstrates how to do this.
  2. Install the web-ext tool, change into the directory of the example extension you'd like to install, and type web-ext run. This will launch Firefox and install the extension automatically. This tool gives you some additional development features such as automatic reloading.

Learn more

To learn more about developing WebExtensions, see the WebExtensions documentation on MDN for getting started guides, tutorials, and full API reference docs.

Problems?

If you find a problem, please file a bug.

If you need help, email the dev-addons mailing list or contact the WebExtensions team in the #webextensions IRC channel on irc.mozilla.org.

Contributing

We welcome contributions, whether they are whole new examples, new features, bug fixes, or translations of localizable strings into new languages. Please see the CONTRIBUTING.md file for more details.