diff --git a/README.md b/README.md
index 426b57a..844851b 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,8 @@ 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](https://developer.mozilla.org/Add-ons/WebExtensions/Examples).
+
The examples are made available under the
[Mozilla Public License 2.0](https://www.mozilla.org/en-US/MPL/2.0/).
@@ -57,160 +59,6 @@ There are a couple ways to try out the example extensions in this repository.
additional development features such as
[automatic reloading](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext#Automatic_extension_reloading).
-## Index of examples
-
-- 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
alarms and tabs.
-
-
-- 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
tabs functions: 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
windows functions: create, close, resize, etc.
-
-
## Learn more
To learn more about developing WebExtensions, see the
diff --git a/examples.json b/examples.json
index 54f9e4a..2ed4b9c 100644
--- a/examples.json
+++ b/examples.json
@@ -87,26 +87,13 @@
},
{
"javascript_apis": [
- "menus.create",
- "menus.onClicked",
+ "contextMenus.create",
+ "contextMenus.onClicked",
"tabs.executeScript"
],
"name": "context-menu-copy-link-with-types",
"description": "Add a context menu option to links to copy the link to the clipboard, as plain text and as a link in rich HTML."
},
- {
- "javascript_apis": [
- "menus.create",
- "menus.onClicked",
- "menus.remove",
- "menus.update",
- "i18n.getMessage",
- "runtime.lastError",
- "tabs.executeScript"
- ],
- "name": "menu-demo",
- "description": "Demonstrates adding and manipulating menu items using the menus API."
- },
{
"javascript_apis": [
"contextualIdentities.query",
@@ -133,6 +120,23 @@
"name": "cookie-bg-picker",
"description": "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."
},
+ {
+ "javascript_apis": [
+ "devtools.inspectedWindow",
+ "devtools.panels",
+ "runtime.getURL",
+ "runtime.onMessage",
+ "runtime.sendMessage",
+ "tabs.executeScript"
+ ],
+ "name": "devtools-panels",
+ "description": "Demonstrates some of the devtools APIs."
+ },
+ {
+ "javascript_apis": [],
+ "name": "discogs-search",
+ "description": "Demonstrates adding a custom search engnie with the chrome_settings_overrides key."
+ },
{
"javascript_apis": [
"alarms.create",
@@ -151,6 +155,14 @@
"name": "embedded-webextension-bootstrapped",
"description": "Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension."
},
+ {
+ "javascript_apis": [
+ "runtime.onMessage",
+ "runtime.sendMessage"
+ ],
+ "name": "embedded-webextension-overlay",
+ "description": "Demonstrates how to use an embedded WebExtension to port from an overlay extension."
+ },
{
"javascript_apis": [
"notifications.create",
@@ -173,15 +185,40 @@
"name": "eslint-example",
"description": "Demonstrates how to configure an extension with eslint."
},
+ {
+ "javascript_apis": [
+ "notifications.create",
+ "runtime.onMessage",
+ "runtime.sendMessage"
+ ],
+ "name": "export-helpers",
+ "description": "Demonstrates how to use export helpers like cloneInto to share objects with page scripts."
+ },
{
"javascript_apis": [
"browserAction.onClicked",
"runtime.openOptionsPage",
+ "storage.managed",
"storage.sync"
],
"name": "favourite-colour",
"description": "An example options page, letting you store your favourite colour."
},
+ {
+ "javascript_apis": [
+ "browserAction.onClicked",
+ "extension.getBackgroundPage",
+ "find.find",
+ "find.highlightResults",
+ "runtime.getURL",
+ "runtime.onMessage",
+ "runtime.sendMessage",
+ "tabs.create",
+ "tabs.query"
+ ],
+ "name": "find-across-tabs",
+ "description": "Demonstration of the find API."
+ },
{
"javascript_apis": [
"omnibox.onInputChanged",
@@ -226,6 +263,15 @@
},
{
"javascript_apis": [
+ "webRequest.filterResponseData",
+ "webRequest.onBeforeRequest"
+ ],
+ "name": "http-response",
+ "description": "Demonstrates how to rewrite HTTP responses using the webRequest.filterResponseData() API."
+ },
+ {
+ "javascript_apis": [
+ "extension.getURL",
"runtime.onMessage",
"tabs.executeScript",
"tabs.query",
@@ -255,6 +301,20 @@
},
{
"javascript_apis": [
+ "i18n.getMessage",
+ "menus.create",
+ "menus.onClicked",
+ "menus.remove",
+ "menus.update",
+ "runtime.lastError",
+ "tabs.executeScript"
+ ],
+ "name": "menu-demo",
+ "description": "Demonstrates adding and manipulating menu items using the menus API."
+ },
+ {
+ "javascript_apis": [
+ "runtime.onMessage",
"runtime.sendMessage"
],
"name": "mocha-client-tests",
@@ -333,7 +393,9 @@
"description": "Allows the user to make quick notes by clicking a button and entering text into the resulting popup. The notes are saved in storage."
},
{
- "javascript_apis": [],
+ "javascript_apis": [
+ "tabs.query"
+ ],
"name": "react-es6-popup",
"description": "This is an example of creating a browser action popup UI in React and ES6 JavaScript."
},
@@ -342,6 +404,33 @@
"name": "selection-to-clipboard",
"description": "Demonstrates how to write to the clipboard from a content script"
},
+ {
+ "javascript_apis": [
+ "menus.create",
+ "menus.onClicked",
+ "sessions.getTabValue",
+ "sessions.setTabValue",
+ "tabs.insertCSS",
+ "tabs.onCreated",
+ "tabs.onUpdated",
+ "tabs.query"
+ ],
+ "name": "session-state",
+ "description": "Demonstrates how to retrieve extension-defined state state from restored tabs."
+ },
+ {
+ "javascript_apis": [
+ "browserAction.onClicked",
+ "contextMenus.create",
+ "contextMenus.onClicked",
+ "runtime.onMessage",
+ "runtime.sendMessage",
+ "tabs.create",
+ "windows.create"
+ ],
+ "name": "store-collected-images",
+ "description": "Demonstrates how to use the idb-file-storage library to store and manipulate files in an extension."
+ },
{
"javascript_apis": [
"storage.local",
@@ -357,14 +446,14 @@
"tabs.create",
"tabs.duplicate",
"tabs.getZoom",
- "tabs.highlight",
"tabs.move",
"tabs.onMoved",
"tabs.onRemoved",
"tabs.query",
"tabs.reload",
"tabs.remove",
- "tabs.setZoom"
+ "tabs.setZoom",
+ "tabs.update"
],
"name": "tabs-tabs-tabs",
"description": "Demonstrates tab manipulation: opening, closing, moving, zooming tabs."
@@ -378,8 +467,7 @@
"description": "An example of how to use the management API for themes."
},
{
- "javascript_apis": [
- ],
+ "javascript_apis": [],
"name": "themes",
"description": "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.
"
},