{{AddonSidebar}}
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.
Extensions borderify and page-to-extension-messaging work on Nightly Firefox OS as well. The others don't work since browser_action and notifications don't seem to be available there.
If you want to contribute to the repository, send us a pull request!
beastify
What it does |
The extension includes:
When the user clicks the browser action button, the popup is shown, enabling the user to choose one of three beasts. When they choose a beast, the extension injects the content script into the current page, and sends the content script a message containing the name of the chosen beast. When the content script receives this message, it replaces the current page content with an image of the chosen beast. |
---|---|
What it shows |
|
manifest.json keys | |
APIs |
borderify
What it does |
This extension just includes:
The content script draws a border around the document.body. |
---|---|
What it shows |
|
manifest.json keys | |
APIs | None. |
notify-link-clicks
What it does |
This extension includes:
The content script listens for clicks in the page it's attached to. If a click is on a link, the content script sends the link's href to the background script. The background script listens for this message. When the background script receives the message, it displays a notification containing the href. |
---|---|
What it shows |
|
manifest.json keys | |
APIs |
open-my-page-button
What it does |
This extension includes:
All it does is: when the user clicks the button, open "my-page.html" in a new tab. |
---|---|
What it shows |
|
manifest.json keys | |
APIs |
page-to-extension-messaging
What it does |
This extension includes:
The content script listens for messages from the same window posted using window.postMessage. When the content script receives such a message, it displays an alert. To test it out, visit https://mdn.github.io/webextensions-examples/content-script-page-script-messaging.html and press the buttons. One button sends a message from the page script to the content script, the other button sends a message in the other direction. |
---|---|
What it shows |
|
manifest.json keys | |
APIs |
None. |
user-agent-rewriter
What it does |
This extension uses the webRequest API to rewrite the browser's User Agent header, but only when visiting pages under "https://useragentstring.com/". It adds a browser action. The browser action has a popup that lets the user choose one of three browsers: Firefox 41, Chrome 41, and IE 11. When the user chooses a browser, the extension then rewrites the User Agent header so the real browser identifies itself as the chosen browser on the site https://useragentstring.com/. |
---|---|
What it shows |
|
manifest.json keys | |
APIs |