Example Firefox add-ons created using the WebExtensions API
JavaScript HTML CSS Other
Latest commit c7fb07a Feb 21, 2017 @wbamberg wbamberg Updated examples.json
Permalink
Failed to load latest commit information.
apply-css Add note about content scripts not working om the AMO site (#160) Dec 12, 2016
beastify Add note about content scripts not working om the AMO site (#160) Dec 12, 2016
bookmark-it Remove applications key wherever possible (#144) Nov 18, 2016
borderify Add note about content scripts not working om the AMO site (#160) Dec 12, 2016
build add in some built versions (#162) Dec 19, 2016
chill-out Remove applications key wherever possible (#144) Nov 18, 2016
commands Remove applications key wherever possible (#144) Nov 18, 2016
context-menu-demo fixed manifest.json of context-menu-demo to make it comply with il8n (#… Dec 13, 2016
contextual-identities an example using contextualIdentities (#179) Feb 8, 2017
cookie-bg-picker Add note about content scripts not working om the AMO site (#160) Dec 12, 2016
embedded-webextension-bootstrapped Rewrite examples to use browser.* and promises (#138) Nov 15, 2016
embedded-webextension-sdk Rewrite examples to use browser.* and promises (#138) Nov 15, 2016
emoji-substitution Add note about content scripts not working om the AMO site (#160) Dec 12, 2016
eslint-example fixed readme, added clarifying comments to the source (#147) Nov 21, 2016
favourite-colour add in prevent default (#173) Jan 3, 2017
firefox-code-search Add Omnibox API example (#164) Dec 16, 2016
forget-it Forget it (#183) Feb 22, 2017
google-userinfo Added an example using the identity API (#180) Feb 16, 2017
history-deleter Remove applications key wherever possible (#144) Nov 18, 2016
latest-download Remove applications key wherever possible (#144) Nov 18, 2016
list-cookies Remove applications key wherever possible (#144) Nov 18, 2016
mocha-client-tests Modify mocha-test-clients to use Karma (#149) Dec 1, 2016
native-messaging make python pep 8 compliant (#159) Dec 16, 2016
navigation-stats Rewrite examples to use browser.* and promises (#138) Nov 15, 2016
notify-link-clicks-i18n Add note about content scripts not working om the AMO site (#160) Dec 12, 2016
open-my-page-button Make URL argument absolute (#154) Dec 8, 2016
page-to-extension-messaging Remove applications key wherever possible (#144) Nov 18, 2016
quicknote Remove applications key wherever possible (#144) Nov 18, 2016
react-es6-popup Example using React / ES6 (#155) Dec 13, 2016
selection-to-clipboard Add note about content scripts not working om the AMO site (#160) Dec 12, 2016
tabs-tabs-tabs Remove applications key wherever possible (#144) Nov 18, 2016
top-sites example of using topSites and chrome_url_override (#176) Jan 31, 2017
user-agent-rewriter make user-agent check case insenstive (#161) Dec 12, 2016
webpack-modules Added link to Browserify, fixed a typo and some minor language update… Feb 21, 2017
window-manipulator Rewrite examples to use browser.* and promises (#138) Nov 15, 2016
CODE_OF_CONDUCT.md add in code of conduct (#143) Nov 16, 2016
CONTRIBUTING.md Update CONTRIBUTING.md Nov 21, 2016
LICENSE added LICENSE Aug 15, 2015
README.md Expand the installation instructions Oct 13, 2016
examples.json Updated examples.json Feb 22, 2017

README.md

webextensions-examples

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.

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 need at least Firefox 45. Some examples rely on APIs that were added in more recent versions of Firefox. To check the minimum version of Firefox needed for a given example, see the strict_min_version part of the applications key in the example's 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.