Merge remote-tracking branch 'origin/master' into export-helpers

* origin/master: (149 commits) Add some icons (#285) add in simple http-response example (#281) convert chrome. to browser. Issue #165 #166 (#262) Update examples.json for contextMenus->menus change (#282) Update context-menu-demo (#272) change shortcut to Ctrl Shift U for commands example (#264) Update `proxy-blocker` extension to be compatible with firefox 56 (#260) Update eslint and .travis.yml (#259) add in titlePreface (#256) Hellosct1 webext (#237) Remove 'highlight', as Firefox does not support it (#252) Reflect bookmark state in icon title to make it accessible to screen readers (#255) Adding listing/descriptions for the imagify and themes examples. (#253) Selfify example (#251) New theme examples (#248) Example: embedded webextension overlay (#249) Add an indexedDB file storage example: image-reference-collector (#224) webextension -> extension (#250) more fields into package.json Add travis-ci build status badge ...
mdn · Oct 10, 2017 · b831706 · b831706
2 parents 292c0c7 2934554
commit b831706
Show file tree

Hide file tree

Showing 453 changed files with 8,327 additions and 1,118 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0  1,4 @@
 **/node_modules/**
 react-es6-popup/**/dist
 mocha-client-tests
 store-collected-images/webextension-plain/deps
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0  1,22 @@
 {
   "root": true,
   "parserOptions": {
     "ecmaVersion": 6
   },
   "env": {
     "browser": true,
     "es6": true,
     "webextensions": true
   },
   "extends": [
     "eslint:recommended"
   ],
   "rules": {
     "no-console": 0,
     "no-unused-vars": ["warn", { "vars": "all", "args": "all" } ],
     "no-undef": ["warn"],
     "no-proto": ["error"],
     "prefer-arrow-callback": ["warn"],
     "prefer-spread": ["warn"]
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -0,0  1 @@
 node_modules
diff --git a/.travis.yml b/.travis.yml
@@ -0,0  1,3 @@
 language: node_js
 node_js: stable
 sudo: false
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -0,0  1,4 @@
 Code of conduct
 ===============
 
 This repository is governed by Mozilla's code of conduct and etiquette guidelines. For more details please see the [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/) and [Developer Etiquette Guidelines](https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -12,15  12,13 @@ to help contributors write useful examples.
 There are many ways you can help improve this repository! For example:
 
 * **write a brand-new example:** for example, you might notice that there are no
-examples highlighting the [cookies API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/cookies).
 examples highlighting a particular [API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API).
 * **extend an existing example:** for example,
-you might notice that the [tabs-tabs-tabs](https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs) example
-uses a lot of tab manipulation APIs, but does not cover
-[tabs.setZoom()](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/setZoom).
 you might notice that an existing example could usefully be extended to demonstrate some extra APIs or techniques.
 * **fix a bug:** we have a list of [issues](https://github.com/mdn/webextensions-examples/issues),
 or maybe you found your own.
 * **contribute a translation:** find an example with a `_locales` directory in
-it, and create a translation of the example's localizable strings into a new language. 
 it, and create a translation of the example's localizable strings into a new language.
 
 ## Guidelines for examples
 
@@ -35,9  33,17 @@ complexity
     * [`description`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/description)
     * [`icons`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/icons)
     * `homepage_url`
-    * [`strict_min_version` in the `applications` key](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications)
 * omit the [`applications` key](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications), unless either of the following apply:
     * the example uses an API or other feature that's not yet available in the current released version of Firefox. In this case, include the `applications` key and set `strict_min_version` to the minimum required version of Firefox.
     * the example needs an explicitly specified ID (for example, [native messaging](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Native_messaging) requires an explicitly specified ID). In this case, include the `applications` key and set `id` appropriately.
 
-Finally, note that the examples are all made available under the
 ## Code style
 
 If you're editing an existing file, code style should be consistent with the rest of the code in the file. Otherwise, code style should follow the style for WebExtensions code itself: [https://wiki.mozilla.org/WebExtensions/Hacking#Code_Style](https://wiki.mozilla.org/WebExtensions/Hacking#Code_Style).
 
 ## Licensing
 
 Please note that the examples are all made available under the
 [Mozilla Public License 2.0](https://github.com/mdn/webextensions-examples/blob/master/LICENSE),
 so any contributions must be
 [compatible with that license](https://www.mozilla.org/en-US/MPL/license-policy/).

diff --git a/README.md b/README.md
@@ -1,4  1,4 @@
-# webextensions-examples
 # webextensions-examples [![Build Status](https://travis-ci.org/mdn/webextensions-examples.svg?branch=master)](https://travis-ci.org/mdn/webextensions-examples)
 
 [https://github.com/mdn/webextensions-examples](https://github.com/mdn/webextensions-examples)
 
@@ -22,19  22,194 @@ The examples are made available under the
 To use the repository, first clone it.
 
 Each example is in its own top-level directory. Install an example in your
-favourite web browser (see [installation instructions for Firefox](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Packaging_and_installation)),
 favourite web browser ([installation instructions](#installing-an-example) 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](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)
 page on MDN.
 
-To use these examples in Firefox, you need at least Firefox 45. Some examples
-rely on APIs that were added in more recent versions of Firefox.
-To check the minimum version of Firefox needed for a given example,
-see the `strict_min_version` part of the [applications key](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications)
-in the example's manifest.json file.
 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](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/applications)
 in its manifest.json file.
 
 ## Installing an example
 
 There are a couple ways to try out the example extensions in this repository.
 
 1. Open Firefox and load `about:debugging` in the URL bar. Click the
    [Load Temporary Add-on](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Temporary_Installation_in_Firefox)
    button and select the `manifest.json` file within the
    directory of an example extension you'd like to install.
    Here is a [video](https://www.youtube.com/watch?v=cer9EUKegG4)
    that demonstrates how to do this.
 2. Install the
    [web-ext](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Getting_started_with_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](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
 
@@ -53,4  228,3 @@ If you need help, email the [dev-addons mailing list](https://mail.mozilla.org/l
 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](https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md) file for more details.
-
diff --git a/annotate-page/README.md b/annotate-page/README.md
@@ -0,0  1,11 @@
 # annotate-page
 
 ## What it does
 
 This example adds a sidebar that lets you take notes on the current web page. The notes are saved to local storage, and the notes for each page are shown again when you open that page again.
 
 The example also uses the `commands` manifest key to add a keyboard shortcut that opens the sidebar.
 
 ## What it shows
 
 How to create a sidebar for an add-on. How to associate the sidebar with the currently active tab in that sidebar's window. How to store and restore sidebar content.
diff --git a/annotate-page/icons/star.png b/annotate-page/icons/star.png
diff --git a/annotate-page/manifest.json b/annotate-page/manifest.json
@@ -0,0  1,29 @@
 {
 
   "manifest_version": 2,
   "name": "Web page annotator",
   "description": "Displays a sidebar that lets you take notes on web pages.",
   "version": "1.0",
   "applications": {
     "gecko": {
       "strict_min_version": "54.0a1"
     }
   },
 
   "sidebar_action": {
     "default_icon": "icons/star.png",
     "default_title" : "Annotator",
     "default_panel": "sidebar/panel.html"
   },
 
   "permissions": ["storage", "tabs"],
 
   "commands": {
     "_execute_sidebar_action": {
       "suggested_key": {
         "default": "Ctrl Shift Y"
       }
     }
   }
 
 }
diff --git a/annotate-page/sidebar/panel.css b/annotate-page/sidebar/panel.css
@@ -0,0  1,32 @@
 html, body {
   height: 100%;
   width: 100%;
   margin: 0;
   box-sizing: border-box;
 }
 
 body {
   height: 90%;
   font: caption;
   background-color: #F4F7F8;
 }
 
 p {
   margin: 1em 2em;
 }
 
 #content {
   height: 90%;
   margin: 2em 2em 0 2em;
   border: .5em solid #DDE4E9;
   transition: background-color .2s ease-out;
 }
 
 #content[contenteditable=true] {
   background-color: white;
   transition: background-color .2s ease-in;
 }
 
 [contenteditable]:focus {
   outline: 0px solid transparent;
 }
diff --git a/annotate-page/sidebar/panel.html b/annotate-page/sidebar/panel.html
@@ -0,0  1,15 @@
 <!DOCTYPE html>
 
 <html>
   <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="panel.css"/>
   </head>
 
 <body>
   <div id = "content"></div>
   <p>Click inside the box to start taking notes on this page.</p>
   <script src="panel.js"></script>
 </body>
 
 </html>