mirror of
https://github.com/mdn/webextensions-examples.git
synced 2026-04-16 06:18:35 +02:00
Update examples.json, remove index from README
This commit is contained in:
Will Bamberg
156
README.md
156
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
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/annotate-page">annotate-page</a></dt>
|
||||
<dd>Sidebar demo.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/apply-css">apply-css</a></dt>
|
||||
<dd>Inserts CSS into a web page.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/beastify">beastify</a></dt>
|
||||
<dd>Adds a browser action with a popup and injects a script into a web page.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/bookmark-it">bookmark-it</a></dt>
|
||||
<dd>Adds and removes bookmarks.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/borderify">borderify</a></dt>
|
||||
<dd>Injects scripts into pages that match a URL pattern.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/chill-out">chill-out</a></dt>
|
||||
<dd>Page action demo, plus some features of <code>alarms</code> and <code>tabs</code>.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/commands">commands</a></dt>
|
||||
<dd>Defines keyboard shortcuts.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-copy-link-with-types">context-menu-copy-link-with-types</a></dt>
|
||||
<dd>Advanced clipboard interaction, including copy to clipboard from a background page.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/context-menu-demo">context-menu-demo</a></dt>
|
||||
<dd>Adds items to the context menu.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/contextual-identities">contextual-identities</a></dt>
|
||||
<dd>Contextual identities (containers) demo.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/cookie-bg-picker">cookie-bg-picker</a></dt>
|
||||
<dd>Demo using cookies, browser actions with popups, and content scripts.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/embedded-webextension-bootstrapped">embedded-webextension-bootstrapped</a></dt>
|
||||
<dd>An embedded WebExtension in a bootstrapped Firefox add-on.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/embedded-webextension-sdk">embedded-webextension-sdk</a></dt>
|
||||
<dd>An embedded WebExtension in an Add-on SDK Firefox add-on.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/emoji-substitution">emoji-substitution</a></dt>
|
||||
<dd>Injects content scripts into web pages matching a given URL pattern.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/eslint-example">eslint-example</a></dt>
|
||||
<dd>How to configure a WebExtension with eslint.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/favourite-colour">favourite-colour</a></dt>
|
||||
<dd>Demo of storage and options(settings) pages.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/firefox-code-search">firefox-code-search</a></dt>
|
||||
<dd>Customizes the behavior of the browser's address bar.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/forget-it">forget-it</a></dt>
|
||||
<dd>Clears stored browsing data.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/google-userinfo">google-userinfo</a></dt>
|
||||
<dd>Authenticates the user with Google.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/history-deleter">history-deleter</a></dt>
|
||||
<dd>Clears browsing history entries by domain.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/latest-download">latest-download</a></dt>
|
||||
<dd>Displays the most recently downloaded item.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/list-cookies">list-cookies</a></dt>
|
||||
<dd>Lists all cookies in the active tab.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/mocha-client-tests">mocha-client-tests</a></dt>
|
||||
<dd>Tests the add-on using Mocha.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/native-messaging">native-messaging</a></dt>
|
||||
<dd>Exchanges messages between the add-on and a Python program installed on the user's computer.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/navigation-stats">navigation-stats</a></dt>
|
||||
<dd>Collects and displays statistics for sites the user navigates to.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n">notify-link-clicks-i18n</a></dt>
|
||||
<dd>Displays localized notifications when the user clicks on links.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button">open-my-page-button</a></dt>
|
||||
<dd>Opens a page bundled with the add-on, when the user clicks a toolbar button.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/page-to-extension-messaging">page-to-extension-messaging</a></dt>
|
||||
<dd>Exchanges messages between a web page and the add-on.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/permissions">permissions</a></dt>
|
||||
<dd>Demo showing how to ask the user for additional permissions at runtime.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/quicknote">quicknote</a></dt>
|
||||
<dd>Note-taking add-on: shows how to store data, and how to use browser actions and popups.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/react-es6-popup">react-es6-popup</a></dt>
|
||||
<dd>How to use React and ES6 in an add-on.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/selection-to-clipboard">selection-to-clipboard</a></dt>
|
||||
<dd>Basic clipboard example: copying to the clipboard in a content script.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/stored-credentials">stored-credentials</a></dt>
|
||||
<dd>Performs HTTP basic authentication using a stored username and password.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs">tabs-tabs-tabs</a></dt>
|
||||
<dd>Demo of various <code>tabs</code> functions: open, close, move, etc.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/top-sites">top-sites</a></dt>
|
||||
<dd>Replaces the "new tab" page with links to pages that the user often visits.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/user-agent-rewriter">user-agent-rewriter</a></dt>
|
||||
<dd>Intercepts and modifies HTTP requests.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/webpack-modules">webpack-modules</a></dt>
|
||||
<dd>Uses webpack to package npm modules for use in an add-on.</dd>
|
||||
</dl>
|
||||
|
||||
<dl><dt><a href="https://github.com/mdn/webextensions-examples/tree/master/window-manipulator">window-manipulator</a></dt>
|
||||
<dd>Demo of various <code>windows</code> functions: create, close, resize, etc.</dd>
|
||||
</dl>
|
||||
|
||||
## Learn more
|
||||
|
||||
To learn more about developing WebExtensions, see the
|
||||
|
||||
128
examples.json
128
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:<ul><li>weta_fade: a basic theme employing a single image specified in <code>headerURL:</code>.</li><li>weta_fade_chrome: the weta_fade theme implemented with Chrome compatible manifest keys.</li><li>weta_tiled: a theme using a tiled image.</li><li>weta_mirror: a theme using multiple images and aligning those images in the header.</li><li>animated: use of an animated PNG.</li></ul>"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user