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.
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.
There are a couple ways to try out the example extensions in this repository.
- Open Firefox and load
about:debuggingin the URL bar. Click the Load Temporary Add-on button and select themanifest.jsonfile within the directory of an example extension you'd like to install. Here is a video that demonstrates how to do this. - 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.
- annotate-page
- Sidebar demo.
- apply-css
- Inserts CSS into a web page.
- beastify
- Adds a browser action with a popup and injects a script into a web page.
- bookmark-it
- Adds and removes bookmarks.
- borderify
- Injects scripts into pages that match a URL pattern.
- chill-out
- Page action demo, plus some features of
alarmsandtabs.
- commands
- Defines keyboard shortcuts.
- context-menu-copy-link-with-types
- Advanced clipboard interaction, including copy to clipboard from a background page.
- context-menu-demo
- Adds items to the context menu.
- contextual-identities
- Contextual identities (containers) demo.
- cookie-bg-picker
- Demo using cookies, browser actions with popups, and content scripts.
- embedded-webextension-bootstrapped
- An embedded WebExtension in a bootstrapped Firefox add-on.
- embedded-webextension-sdk
- An embedded WebExtension in an Add-on SDK Firefox add-on.
- emoji-substitution
- Injects content scripts into web pages matching a given URL pattern.
- eslint-example
- How to configure a WebExtension with eslint.
- favourite-colour
- Demo of storage and options(settings) pages.
- firefox-code-search
- Customizes the behavior of the browser's address bar.
- forget-it
- Clears stored browsing data.
- google-userinfo
- Authenticates the user with Google.
- history-deleter
- Clears browsing history entries by domain.
- latest-download
- Displays the most recently downloaded item.
- list-cookies
- Lists all cookies in the active tab.
- mocha-client-tests
- Tests the add-on using Mocha.
- native-messaging
- Exchanges messages between the add-on and a Python program installed on the user's computer.
- navigation-stats
- Collects and displays statistics for sites the user navigates to.
- notify-link-clicks-i18n
- Displays localized notifications when the user clicks on links.
- open-my-page-button
- Opens a page bundled with the add-on, when the user clicks a toolbar button.
- page-to-extension-messaging
- Exchanges messages between a web page and the add-on.
- permissions
- Demo showing how to ask the user for additional permissions at runtime.
- quicknote
- Note-taking add-on: shows how to store data, and how to use browser actions and popups.
- react-es6-popup
- How to use React and ES6 in an add-on.
- selection-to-clipboard
- Basic clipboard example: copying to the clipboard in a content script.
- stored-credentials
- Performs HTTP basic authentication using a stored username and password.
- tabs-tabs-tabs
- Demo of various
tabsfunctions: open, close, move, etc.
- top-sites
- Replaces the "new tab" page with links to pages that the user often visits.
- user-agent-rewriter
- Intercepts and modifies HTTP requests.
- webpack-modules
- Uses webpack to package npm modules for use in an add-on.
- window-manipulator
- Demo of various
windowsfunctions: create, close, resize, etc.
To learn more about developing WebExtensions, see the WebExtensions documentation on MDN for getting started guides, tutorials, and full API reference docs.
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.
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.