Update context-menu-demo (#272)

* Update context-menu-demo

* Some cleanup, and note from cross-browser compat

examples.json

@@ -103,8 +103,8 @@
             "runtime.lastError",
             "tabs.executeScript"
         ],
-        "name": "context-menu-demo",
-        "description": "Demonstrates adding and manipulating context menu items using the contextMenus API."
+        "name": "menu-demo",
+        "description": "Demonstrates adding and manipulating menu items using the menus API."
     },
     {
         "javascript_apis": [

menu-demo/README.md

@@ -1,9 +1,11 @@
-# context-menu-demo
+# menu-demo
 
-A demo of the [contextMenus API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contextMenus/).
+A demo of the [menus API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/menus/).
 
 **This add-on injects JavaScript into web pages. The `addons.mozilla.org` domain disallows this operation, so this add-on will not work properly when it's run on pages in the `addons.mozilla.org` domain.**
 
+**This add-on uses the `menus` namespace to access the functions it needs to create menu items. Note that Chrome, Edge, and Opera all use the `contextMenus` namespace for this, so this extension will not work in these browsers. For compatibility with these browsers, Firefox also offers the `contextMenus` namespace, so to make this extension work with other browsers, use `contextMenus`.**
+
 ## What it does
 
 This add-on adds several items to the browser's context menu:
@@ -20,9 +22,11 @@ like about:debugging.
 item is clicked.
 * one item that uses the "commands" property to open the add-on's sidebar.
 
+It also adds one item to the browser's "Tools" menu.
+
 ## What it shows
 
-* How to create various types of context menu item:
+* How to create various types of menu item:
   * normal
   * radio
   * separator

menu-demo/_locales/en/messages.json

@@ -1,47 +1,52 @@
 {
   "extensionName": {
-    "message": "Context menu demo",
+    "message": "Menu demo",
     "description": "Name of the extension."
   },
 
   "extensionDescription": {
-    "message": "Demonstrates the contextMenus API.",
+    "message": "Demonstrates the menus API.",
     "description": "Description of the add-on."
   },
 
-  "contextMenuItemSelectionLogger": {
+  "menuItemSelectionLogger": {
     "message": "Log '%s' to the browser console",
     "description": "Title of context menu item that logs the selected text when clicked."
   },
 
-  "contextMenuItemRemoveMe": {
+  "menuItemRemoveMe": {
     "message": "Remove me!",
     "description": "Title of context menu item that removes itself when clicked."
   },
 
-  "contextMenuItemGreenify": {
+  "menuItemGreenify": {
     "message": "Greenify",
     "description": "Title of context menu item that adds a green border when clicked."
   },
 
-  "contextMenuItemBluify": {
+  "menuItemBluify": {
     "message": "Bluify",
     "description": "Title of context menu item that adds a green border when clicked."
   },
 
-  "contextMenuItemCheckMe": {
+  "menuItemCheckMe": {
     "message": "Check me",
     "description": "Title of context menu item when the item is checked."
   },
 
-  "contextMenuItemUncheckMe": {
+  "menuItemUncheckMe": {
     "message": "Uncheck me",
     "description": "Title of context menu item when the item is unchecked."
   },
 
-  "contextMenuItemOpenSidebar": {
+  "menuItemOpenSidebar": {
     "message": "Open sidebar",
     "description": "Title of context menu item that opens a sidebar."
+  },
+
+  "menuItemToolsMenu": {
+    "message": "Click me!",
+    "description": "Title of tools menu item."
   }
 
 }

menu-demo/background.js

@@ -29,41 +29,41 @@ function onError(error) {
 /*
 Create all the context menu items.
 */
-browser.contextMenus.create({
+browser.menus.create({
   id: "log-selection",
-  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
+  title: browser.i18n.getMessage("menuItemSelectionLogger"),
   contexts: ["selection"]
 }, onCreated);
 
-browser.contextMenus.create({
+browser.menus.create({
   id: "remove-me",
-  title: browser.i18n.getMessage("contextMenuItemRemoveMe"),
+  title: browser.i18n.getMessage("menuItemRemoveMe"),
   contexts: ["all"]
 }, onCreated);
 
-browser.contextMenus.create({
+browser.menus.create({
   id: "separator-1",
   type: "separator",
   contexts: ["all"]
 }, onCreated);
 
-browser.contextMenus.create({
+browser.menus.create({
   id: "greenify",
   type: "radio",
-  title: browser.i18n.getMessage("contextMenuItemGreenify"),
+  title: browser.i18n.getMessage("menuItemGreenify"),
   contexts: ["all"],
   checked: true
 }, onCreated);
 
-browser.contextMenus.create({
+browser.menus.create({
   id: "bluify",
   type: "radio",
-  title: browser.i18n.getMessage("contextMenuItemBluify"),
+  title: browser.i18n.getMessage("menuItemBluify"),
   contexts: ["all"],
   checked: false
 }, onCreated);
 
-browser.contextMenus.create({
+browser.menus.create({
   id: "separator-2",
   type: "separator",
   contexts: ["all"]
@@ -71,22 +71,27 @@ browser.contextMenus.create({
 
 var checkedState = true;
 
-browser.contextMenus.create({
+browser.menus.create({
   id: "check-uncheck",
   type: "checkbox",
-  title: browser.i18n.getMessage("contextMenuItemUncheckMe"),
+  title: browser.i18n.getMessage("menuItemUncheckMe"),
   contexts: ["all"],
   checked: checkedState
 }, onCreated);
 
-
-browser.contextMenus.create({
+browser.menus.create({
   id: "open-sidebar",
-  title: browser.i18n.getMessage("contextMenuItemOpenSidebar"),
+  title: browser.i18n.getMessage("menuItemOpenSidebar"),
   contexts: ["all"],
   command: "_execute_sidebar_action"
 }, onCreated);
 
+browser.menus.create({
+  id: "tools-menu",
+  title: browser.i18n.getMessage("menuItemToolsMenu"),
+  contexts: ["tools_menu"],
+}, onCreated);
+
 /*
 Set a colored border on the document in the given tab.
 
@@ -113,12 +118,12 @@ property into the event listener.
 function updateCheckUncheck() {
   checkedState = !checkedState;
   if (checkedState) {
-    browser.contextMenus.update("check-uncheck", {
-      title: browser.i18n.getMessage("contextMenuItemUncheckMe"),
+    browser.menus.update("check-uncheck", {
+      title: browser.i18n.getMessage("menuItemUncheckMe"),
     });
   } else {
-    browser.contextMenus.update("check-uncheck", {
-      title: browser.i18n.getMessage("contextMenuItemCheckMe"),
+    browser.menus.update("check-uncheck", {
+      title: browser.i18n.getMessage("menuItemCheckMe"),
     });
   }
 }
@@ -127,13 +132,13 @@ function updateCheckUncheck() {
 The click event listener, where we perform the appropriate action given the
 ID of the menu item that was clicked.
 */
-browser.contextMenus.onClicked.addListener((info, tab) => {
+browser.menus.onClicked.addListener((info, tab) => {
   switch (info.menuItemId) {
     case "log-selection":
       console.log(info.selectionText);
       break;
     case "remove-me":
-      var removing = browser.contextMenus.remove(info.menuItemId);
+      var removing = browser.menus.remove(info.menuItemId);
       removing.then(onRemoved, onError);
       break;
     case "bluify":
@@ -148,5 +153,8 @@ browser.contextMenus.onClicked.addListener((info, tab) => {
     case "open-sidebar":
       console.log("Opening my sidebar");
       break;
+    case "tools-menu":
+      console.log("Clicked the tools menu item");
+      break;
   }
 });

menu-demo/manifest.json

@@ -7,7 +7,7 @@
   "default_locale": "en",
   "applications": {
     "gecko": {
-      "strict_min_version": "55.0a1"
+      "strict_min_version": "56.0a1"
     }
   },
 
@@ -16,7 +16,7 @@
   },
   
   "permissions": [
-    "contextMenus",
+    "menus",
     "activeTab"
   ],