Update examples.json, remove index from README (#301)

This commit is contained in:
wbamberg
2017-10-25 13:26:21 -07:00
committed by GitHub
parent 17a58bc196
commit dabfe5c721
2 changed files with 110 additions and 174 deletions

156
README.md
View File

@@ -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 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. 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 The examples are made available under the
[Mozilla Public License 2.0](https://www.mozilla.org/en-US/MPL/2.0/). [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 additional development features such as
[automatic reloading](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_web-ext#Automatic_extension_reloading). [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 ## Learn more
To learn more about developing WebExtensions, see the To learn more about developing WebExtensions, see the

View File

@@ -87,26 +87,13 @@
}, },
{ {
"javascript_apis": [ "javascript_apis": [
"menus.create", "contextMenus.create",
"menus.onClicked", "contextMenus.onClicked",
"tabs.executeScript" "tabs.executeScript"
], ],
"name": "context-menu-copy-link-with-types", "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." "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": [ "javascript_apis": [
"contextualIdentities.query", "contextualIdentities.query",
@@ -133,6 +120,23 @@
"name": "cookie-bg-picker", "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." "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": [ "javascript_apis": [
"alarms.create", "alarms.create",
@@ -151,6 +155,14 @@
"name": "embedded-webextension-bootstrapped", "name": "embedded-webextension-bootstrapped",
"description": "Demonstrates how to use an embedded WebExtension to port from a bootstrapped extension." "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": [ "javascript_apis": [
"notifications.create", "notifications.create",
@@ -173,15 +185,40 @@
"name": "eslint-example", "name": "eslint-example",
"description": "Demonstrates how to configure an extension with eslint." "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": [ "javascript_apis": [
"browserAction.onClicked", "browserAction.onClicked",
"runtime.openOptionsPage", "runtime.openOptionsPage",
"storage.managed",
"storage.sync" "storage.sync"
], ],
"name": "favourite-colour", "name": "favourite-colour",
"description": "An example options page, letting you store your 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": [ "javascript_apis": [
"omnibox.onInputChanged", "omnibox.onInputChanged",
@@ -226,6 +263,15 @@
}, },
{ {
"javascript_apis": [ "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", "runtime.onMessage",
"tabs.executeScript", "tabs.executeScript",
"tabs.query", "tabs.query",
@@ -255,6 +301,20 @@
}, },
{ {
"javascript_apis": [ "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" "runtime.sendMessage"
], ],
"name": "mocha-client-tests", "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." "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", "name": "react-es6-popup",
"description": "This is an example of creating a browser action popup UI in React and ES6 JavaScript." "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", "name": "selection-to-clipboard",
"description": "Demonstrates how to write to the clipboard from a content script" "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": [ "javascript_apis": [
"storage.local", "storage.local",
@@ -357,14 +446,14 @@
"tabs.create", "tabs.create",
"tabs.duplicate", "tabs.duplicate",
"tabs.getZoom", "tabs.getZoom",
"tabs.highlight",
"tabs.move", "tabs.move",
"tabs.onMoved", "tabs.onMoved",
"tabs.onRemoved", "tabs.onRemoved",
"tabs.query", "tabs.query",
"tabs.reload", "tabs.reload",
"tabs.remove", "tabs.remove",
"tabs.setZoom" "tabs.setZoom",
"tabs.update"
], ],
"name": "tabs-tabs-tabs", "name": "tabs-tabs-tabs",
"description": "Demonstrates tab manipulation: opening, closing, moving, zooming 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." "description": "An example of how to use the management API for themes."
}, },
{ {
"javascript_apis": [ "javascript_apis": [],
],
"name": "themes", "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>" "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>"
}, },