Merge pull request #33 from rpl/fx46/inpage-toolbar-ui

Add inpage-toolbar-ui example

inpage-toolbar-ui/README.md

@@ -0,0 +1,27 @@
+# inpage-toolbar-ui
+
+## What it does ##
+
+The extension includes:
+
+* a browser action which enables/disables the in-page toolbar
+* a content script which creates/removes the in-page toolbar iframe
+* the toolbar ui resources, packaged as web accessible resources
+
+When the user clicks the browser action button, a toolbar is shown/hidden
+in the current web page.
+
+The toolbar UI is packaged in the add-on resources, exposed to the current
+web page as a web accessible resource and injected into the page by the
+content script by creating and injecting into the page an iframe which
+points to the toolbar UI page.
+
+## What it shows ##
+
+How to expose an in-page toolbar UI by creating an iframe:
+
+* use web accessible resources to enable web pages to load packaged content
+* use a content script to create and inject in a web page an iframe which points to the
+  packaged content
+* use the same API enabled in content scripts (but from the add-on iframe)
+  to exchange messages directly with the add-on background page

inpage-toolbar-ui/background.js

@@ -0,0 +1,17 @@
+// Send a message to the current tab's content script.
+function toggleToolbar() {
+  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
+    chrome.tabs.sendMessage(tabs[0].id, "toggle-in-page-toolbar");
+  });
+}
+
+// Handle the browser action button.
+chrome.browserAction.onClicked.addListener(toggleToolbar);
+
+// Handle connections received from the add-on toolbar ui iframes.
+chrome.runtime.onConnect.addListener(function (port) {
+  if (port.sender.url == chrome.runtime.getURL("toolbar/ui.html")) {
+    // Handle port messages received from the connected toolbar ui frames.
+    port.onMessage.addListener(toggleToolbar);
+  }
+});

inpage-toolbar-ui/contentscript.js

@@ -0,0 +1,36 @@
+var toolbarUI;
+
+// Create the toolbar ui iframe and inject it in the current page
+function initToolbar() {
+  var iframe = document.createElement("iframe");
+  iframe.setAttribute("src", chrome.runtime.getURL("toolbar/ui.html"));
+  iframe.setAttribute("style", "position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; height: 36px;");
+  document.body.appendChild(iframe);
+
+  return toolbarUI = {
+    iframe: iframe, visible: true
+  };
+}
+
+function toggleToolbar(toolbarUI) {
+  if (toolbarUI.visible) {
+    toolbarUI.visible = false;
+    toolbarUI.iframe.style["display"] = "none";
+  } else {
+    toolbarUI.visible = true;
+    toolbarUI.iframe.style["display"] = "block";
+  }
+}
+
+// Handle messages from the add-on background page (only in top level iframes)
+if (window.parent == window) {
+  chrome.runtime.onMessage.addListener(function(msg) {
+    if (msg == "toggle-in-page-toolbar") {
+      if (toolbarUI) {
+        toggleToolbar(toolbarUI);
+      } else {
+        toolbarUI = initToolbar();
+      }
+    }
+  });
+}

inpage-toolbar-ui/manifest.json

@@ -0,0 +1,40 @@
+{
+  "description": "Adds a browser action icon to the toolbar. Click the button to inject an in-page toolbar UI into the current webpage. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#inpage-toolbar-ui",
+  "manifest_version": 2,
+  "name": "In Page Toolbar UI",
+  "version": "1.0",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/inpage-toolbar-ui",
+  "icons": {
+    "48": "icons/48.png"
+  },
+
+  "permissions": [],
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "browser_action": {
+    "default_icon": "icons/32.png",
+    "default_title": "In Page Toolbar"
+  },
+
+  "content_scripts": [
+    {
+      "js": ["contentscript.js"],
+      "run_at": "document_idle",
+      "matches": ["<all_urls>"]
+    }
+  ],
+
+  "web_accessible_resources": [
+    "toolbar/ui.html"
+  ],
+
+  "applications": {
+    "gecko": {
+      "id": "inpage-toolbar-ui@mozilla.org",
+      "strict_min_version": "46.0.0"
+    }
+  }
+}

inpage-toolbar-ui/toolbar/ui.css

@@ -0,0 +1,62 @@
+body {
+  overflow: hidden;
+  color: black;
+  background: rgba(255,255,255,0.9);
+}
+
+#rainbow {
+  background: linear-gradient(0deg, rgba(217,26,18,0.70) 15%, rgba(225,51,0,0.70) 15%, rgba(255, 127, 20, 0.70) 16%, rgba(242, 171, 3, 0.70) 32%, rgba(235, 192, 0, 0.70) 32%, rgba(250, 222, 0, 0.70) 33%, rgba(239, 255, 3, 0.70) 48%, rgba(86, 252, 2, 0.70) 49%, rgba(82, 255, 1, 0.70) 66%, rgba(74, 222, 126, 0.70) 67%, rgba(59, 170, 242, 0.70) 67%, rgba(59, 170, 242, 0.70) 84%, rgba(115, 55, 247, 0.70) 84%, rgba(107, 64, 242, 0.70) 100%);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+}
+
+#title {
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.whimsy {
+  width: 36px;
+  height: 36px;
+}
+
+/* Toggle Button. */
+
+#toggle {
+  top: 8px;
+  right: 4px;
+  position: absolute;
+  margin: 0 1em;
+  text-decoration: underline;
+  border-radius: 1em;
+  background: transparent linear-gradient(0deg, rgb(255, 162, 0), rgba(189, 122, 6, 0.66));
+}
+
+/* Annoying animation. */
+
+@keyframes wobbling {
+  50% {
+    transform: translateY(-13px);
+  }
+
+  100% {
+    transform: translateY(0px);
+  }
+}
+
+.wobbling {
+  display: inline-block;
+  vertical-align: middle;
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+  backface-visibility: hidden;
+
+  animation-name: wobbling;
+  animation-duration: 1.25s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+}

inpage-toolbar-ui/toolbar/ui.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="ui.css">
+  </head>
+  <body>
+    <span>
+      <div id="rainbow"></div>
+      <img src="whimsy.png" class="whimsy wobbling">
+      <span id="title" class="wobbling">In-Page "Amazing and super-useful" Toolbar</span>
+    </span>
+    <button id="toggle">toggle</button>
+    <script src="ui.js">
+    </script>
+  </body>
+</html>

inpage-toolbar-ui/toolbar/ui.js

@@ -0,0 +1,8 @@
+// Connect to the background page.
+var port = chrome.runtime.connect();
+
+// Handle click events on the toolbar button.
+document.querySelector("#toggle").addEventListener("click", function() {
+  // Ask the background page to toggle the toolbar on the current tab
+  port.postMessage("toggle-in-page-toolbar");
+});