Add an example of how to use export helpers in content scripts (#86)

* Added example of using export helpers

* stop using wrapedJSObject with exportFunction; remove createObjectIn

* Updated for review comments

* Fix content_scripts 'matches' property

export-helpers/README.md

@@ -0,0 +1,47 @@
+# export-helpers
+
+## What it does
+
+This extension demonstrates how to use [export helpers](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_scripts#Sharing_content_script_objects_with_page_scripts) in Firefox to share
+JavaScript objects defined in content scripts with scripts loaded by web pages.
+
+## How it works
+
+This example is in two parts:
+
+* an extension that consists of a content script and a background script
+* a web page at: https://mdn.github.io/webextensions-examples/export-helpers.html
+
+### The extension
+
+ The extension loads a content script into the page at: https://mdn.github.io/webextensions-examples/export-helpers.html. The content script:
+ 
+ * defines a function `notify()` and uses `exportFunction()` to export it to the page as a property of the global `window` object.
+ * defines an object `messenger`, that has a member function `notify()`, and
+uses `cloneInto()` to export that to the page as a property of the global `window` object.
+ 
+ In the implementation of `notify()`, the content script sends a message to the extension's background script: when the background script gets the messages, it displays a [notification](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/notifications).
+
+## The page
+
+The page is just a normal web page. It contains two buttons and loads a script. The script:
+
+* listens for clicks on the first button and calls:
+
+
+    window.notify("Message from the page script!");
+
+* listens for clicks on the other button and calls:
+
+
+    window.messenger.notify("Message from the page script!");
+
+These items are available in the page's scope because the content script exported them.
+
+## How to us it
+
+To see the extension in action:
+
+1. install the extension
+2. visit https://mdn.github.io/webextensions-examples/export-helpers.html
+3. click one of the buttons in the page. You should see a notification from the extension.

export-helpers/background.js

@@ -0,0 +1,10 @@
+/**
+ * Show a notification when we get messages from the content script.
+ */
+browser.runtime.onMessage.addListener((message) => {
+  browser.notifications.create({
+    type: "basic",
+    title: "Message from the page",
+    message: message.content
+  });
+});

export-helpers/content_scripts/export.js

@@ -0,0 +1,25 @@
+
+/**
+ * Define a function in the content script's scope, then export it
+ * into the page script's scope.
+ */
+function notify(message) {
+  browser.runtime.sendMessage({content: "Function call: " + message});
+}
+
+exportFunction(notify, window, {defineAs:'notify'});
+
+/**
+ * Create an object that contains functions in the content script's scope,
+ * then clone it into the page script's scope.
+ *
+ * Because the object contains functions, the cloneInto call must include
+ * the `cloneFunctions` option.
+ */
+var messenger = {
+  notify: function(message) {
+    browser.runtime.sendMessage({content: "Object method call: " + message});
+  }
+};
+
+window.wrappedJSObject.messenger = cloneInto(messenger, window, {cloneFunctions: true});

export-helpers/icons/LICENSE

@@ -0,0 +1,5 @@
+The "arrow.svg" icon is from the Freecns Cumulus iconset by Yannick Lung
+ and is used here under the terms of its license.
+ 
+ https://www.iconfinder.com/iconsets/freecns-cumulus
+ http://yannicklung.com/

export-helpers/icons/arrow.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="16px" version="1.1" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><defs/><g fill="none" fill-rule="evenodd" id="Icons with numbers" stroke="none" stroke-width="1"><g fill="#000000" id="Group" transform="translate(-96.000000, -336.000000)"><path d="M112,344 L106,339 L106,342 C101.5,342 98,343 96,348 C99,345.5 102,345 106,346 L106,349 L112,344 L112,344 Z M112,344" id="Shape"/></g></g></svg>

export-helpers/manifest.json

@@ -0,0 +1,35 @@
+{
+
+  "description": "Demonstrates how to use export helpers in Firefox to share objects with page scripts.",
+  "manifest_version": 2,
+  "name": "export-helpers",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/export-helpers",
+  "icons": {
+    "48": "icons/arrow.svg"
+  },
+
+  "applications": {
+    "gecko": {
+      "id": "export-helpers@mozilla.org",
+      "strict_min_version": "49.0"
+    }
+  },
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["https://mdn.github.io/webextensions-examples/export-helpers.html"],
+      "js": ["content_scripts/export.js"]
+    }
+  ],
+  
+  "permissions": [
+    "activeTab",
+    "notifications"
+  ]
+
+}