Add an example for menus.onShown and menus.refresh() (#343)

* Add an example for menus.onShown and menus.refresh()

* Add version

* Remove unusued variable; use strict

menu-labelled-open/README.md

@@ -0,0 +1,13 @@
+# menu-labelled-open
+
+## What it does
+
+This extension adds a menu item that's shown when the context menu is shown over a link. When the item is clicked, it just opens the link in the current tab.
+
+The extension also listens for the `onShown` event: when this event is fired, the extension gets the hostname for the link and displays it in the menu item's title, so the user knows the hostname for the link they are thinking of clicking.
+
+## What it shows
+
+This extension is a demo of the [`menus.onShown` ](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/onShown) and [`menus.refresh()`](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/refresh) features of the `menus` API.
+
+The `onShown` event enables extensions to be notified when the menu is shown. At that point they are able to add, remove, or update their menu items, then refresh the menu using `refresh()`.

menu-labelled-open/background.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const openLabelledId = "open-labelled";
+
+browser.menus.create({
+  id: openLabelledId,
+  title: "Open",
+  contexts: ["link"]
+});
+
+browser.menus.onClicked.addListener((info, tab) => {
+  if (info.menuItemId === openLabelledId) {
+    browser.tabs.update(tab.id, {
+      url: info.linkUrl
+    });
+  }
+});
+
+async function updateMenuItem(linkHostname) {
+  await browser.menus.update(openLabelledId, {
+    title: `Open (${linkHostname})`
+  });
+  await browser.menus.refresh();
+}
+
+browser.menus.onShown.addListener(info => {
+  if (!info.linkUrl) {
+    return;
+  }
+  let linkElement = document.createElement("a");
+  linkElement.href = info.linkUrl;
+  updateMenuItem(linkElement.hostname);
+});

menu-labelled-open/icon/LICENSE

@@ -0,0 +1 @@
+The "label.svg" icon is taken from the PICOL iconset (http://www.picol.org/) and is used here under the terms of the Creative Commons Attribution-ShareAlike 3.0 license (https://creativecommons.org/licenses/by-sa/3.0/).

menu-labelled-open/icon/label.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="label"><g><path d="M16,0.814L4,8.452V32h24V8.45L16,0.814z M26,29.999H6V9.548l10-6.364l10,6.364V29.999z M14,8c0,1.104,0.896,2,2,2    c1.104,0,2-0.896,2-2s-0.896-2-2-2C14.896,6,14,6.896,14,8z"/></g></g></svg>

menu-labelled-open/manifest.json

@@ -0,0 +1,27 @@
+{
+
+  "manifest_version": 2,
+  "name": "Labelled open",
+  "description": "Adds a context menu item that labels links with the hostname. Demo of onShown and refresh().",
+  "version": "1.0",
+  "applications": {
+    "gecko": {
+      "strict_min_version": "60.0a1"
+    }
+  },
+  "icons": {
+    "16": "icon/label.svg",
+    "32": "icon/label.svg",
+    "48": "icon/label.svg"
+  },
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+  
+  "permissions": [
+    "menus",
+    "<all_urls>"
+  ]
+
+}