Added an example for contentScripts.register (#325)

* Added an example for contentScripts.register

* Use messaging instead of getBackgroundPage

user-script/README.md

@@ -0,0 +1,24 @@
+# User script
+
+This extension demonstrates the `browser.contentScripts.register()` API, which enables an extension to register URL-matching content scripts at runtime.
+
+This extension adds a browser action that shows a popup. The popup lets you specify:
+
+* some code that comprises your content script
+* one or more [match patterns](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Match_patterns), comma-separated. The content script will only be loaded into pages whose URLs match these patterns.
+
+Once these are set up you can register the content script by clicking "Register script". The extension will then register a content script with the given properties by calling `browser.contentScripts.register()`.
+
+To keep things simple, you can only have one script registered at any time: if you click "Register script" again, the old script is unregistered. To do this, the extension keeps a reference to the `RegisteredContentScript` object returned from `browser.contentScripts.register()`: this object provides the `unregister()` method.
+
+Note that the extension uses a background script to register the content scripts and to keep a reference to the `RegisteredContentScript` object. If it did not do this, then as soon as the popup window closed, the `RegisteredContentScript` would go out of scope and be destroyed, and the browser would then unregister the content script as part of cleanup.
+
+## Default settings
+
+The popup is initialized with some default values for the pattern and the code:
+
+* the pattern `*://*.org/*`, which will load the script into any HTTP or HTTPS pages on a `.org` domain.
+* the code `document.body.innerHTML = '<h1>This page has been eaten<h1>'`
+
+To try the extension out quickly, just click "Register script" with these defaults, and load http://example.org/ or 
+https://www.mozilla.org/. Then try changing the pattern or the code, and reloading these or related pages.

user-script/background.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var registered = null;
+
+async function registerScript(message) {
+
+  let hosts = message.hosts;
+  let code = message.code;
+
+  if (registered) {
+    registered.unregister();
+  }
+
+  registered = await browser.contentScripts.register({
+    matches: hosts,
+    js: [{code}],
+    runAt: "document_idle"
+  });
+
+}
+
+browser.runtime.onMessage.addListener(registerScript);

user-script/icons/LICENSE

@@ -0,0 +1 @@
+The icon "if_source_code_103710.svg" is from picol.org (http://www.picol.org/) and is used under the terms of the Creative Commons Attribution license: http://creativecommons.org/licenses/by/3.0/.

user-script/icons/if_source_code_103710.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg enable-background="new 0 0 32 32" height="32px" id="svg2" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"><g id="background"><rect fill="none" height="32" width="32"/></g><g id="sourcecode"><polygon points="22,22 22,26 32,16 22,6 22,10 28,16  "/><polygon points="10,22 10,26 0,16 10,6 10,10 4,16  "/><polygon points="10,20 14,20 22,12 18,12  "/></g></svg>

user-script/manifest.json

@@ -0,0 +1,36 @@
+{
+
+  "manifest_version": 2,
+  "name": "User script",
+  "version": "1.1",
+
+  "applications": {
+    "gecko": {
+      "id": "user-script-example@mozilla.org",
+      "strict_min_version": "59.0a1"
+    }
+  },
+
+  "description": "Demonstration of contentScripts.register.",
+  "icons": {
+    "48": "icons/if_source_code_103710.svg"
+  },
+
+  "permissions": [
+    "<all_urls>"
+  ],
+
+  "browser_action": {
+    "default_icon": {
+     "32" : "icons/if_source_code_103710.svg"
+    },
+    "default_title": "User script",
+    "default_popup": "popup/user-script.html",
+    "browser_style": true
+  },
+
+  "background": {
+    "scripts": ["background.js"]
+  }
+
+}

user-script/popup/user-script.css

@@ -0,0 +1,16 @@
+
+#outer-wrapper {
+  padding: 0.5em;
+}
+
+input {
+  width: 100%;
+  margin-bottom: 1em;
+}
+
+textarea {
+  width: 100%;
+  resize: none;
+  border: 1px solid #e4e4e4;
+  margin-bottom: 1em;
+}

user-script/popup/user-script.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="user-script.css"/>
+  </head>
+
+<body>
+
+  <div id="outer-wrapper">
+
+    <label for="hosts">Hosts</label>
+    <input id="hosts" type="text">
+
+    <label for="code">Code</label>
+    <textarea id="code" rows="10"></textarea>
+
+    <button id="register">Register script</button>
+
+  </div>
+
+  <script src="user-script.js"></script>
+</body>
+
+</html>

user-script/popup/user-script.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const hostsInput =  document.querySelector("#hosts");
+const codeInput =  document.querySelector("#code");
+
+const defaultHosts = "*://*.org/*";
+const defaultCode = "document.body.innerHTML = '<h1>This page has been eaten<h1>'";
+
+hostsInput.value = defaultHosts;
+codeInput.value = defaultCode;
+
+function registerScript() {
+  browser.runtime.sendMessage({
+    hosts: hostsInput.value.split(","),
+    code: codeInput.value
+  });
+}
+
+document.querySelector("#register").addEventListener('click', registerScript);