Added a demo of the contextMenus API

context-menu-demo/README.md

@@ -0,0 +1,28 @@
+# context-menu-demo
+
+A demo of the [contextMenus API](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/contextMenus/).
+
+## What it does
+
+This add-on adds several items to the browser's context menu:
+
+* one shown when there is a selection in the page, that logs the selected text
+when clicked.
+* one shown in all contexts, that is removed when clicked.
+* two "radio" items that are shown when a page under "developer.mozilla.org"
+is loaded. These items are grouped using a separator item on each side.
+One radio item adds a blue border to the page, the other adds a green border.
+* one "checkbox" item, shown in all contexts, whose title is updated when the
+item is clicked.
+
+## What it shows
+
+* How to create various types of context menu item:
+  * normal
+  * radio
+  * separator
+  * checkbox
+* How to use contexts to control when an item appears.
+* How to display an item only for certain pages.
+* How to update an item's properties.
+* How to remove an item.

context-menu-demo/_locales/en/messages.json

@@ -0,0 +1,42 @@
+{
+  "extensionName": {
+    "message": "Context menu demo",
+    "description": "Name of the extension."
+  },
+
+  "extensionDescription": {
+    "message": "Demonstrates the contextMenus API.",
+    "description": "Description of the add-on."
+  },
+
+  "contextMenuItemSelectionLogger": {
+    "message": "Log '%s' to the console",
+    "description": "Title of context menu item that logs the selected text when clicked."
+  },
+
+  "contextMenuItemRemoveMe": {
+    "message": "Remove me!",
+    "description": "Title of context menu item that removes itself when clicked."
+  },
+
+  "contextMenuItemGreenify": {
+    "message": "Greenify",
+    "description": "Title of context menu item that adds a green border when clicked."
+  },
+
+  "contextMenuItemBluify": {
+    "message": "Bluify",
+    "description": "Title of context menu item that adds a green border when clicked."
+  },
+
+  "contextMenuItemCheckMe": {
+    "message": "Check me",
+    "description": "Title of context menu item when the item is checked."
+  },
+
+  "contextMenuItemUncheckMe": {
+    "message": "Uncheck me",
+    "description": "Title of context menu item when the item is unchecked."
+  }
+
+}

context-menu-demo/background.js

@@ -0,0 +1,135 @@
+/*
+Called when the item has been created, or when creation failed due to an error.
+We'll just log success/failure here.
+*/
+function onCreated(n) {
+  if (chrome.runtime.lastError) {
+    console.log("error creating item:" + chrome.runtime.lastError);
+  } else {
+    console.log("item created successfully");
+  }
+}
+
+/*
+Called when the item has been removed, or when there was an error.
+We'll just log success or failure here.
+*/
+function onRemoved() {
+  if (chrome.runtime.lastError) {
+    console.log("error removing item:" + chrome.runtime.lastError);
+  } else {
+    console.log("item removed successfully");
+  }
+}
+
+/*
+Create all the context menu items.
+*/
+chrome.contextMenus.create({
+  id: "log-selection",
+  title: chrome.i18n.getMessage("contextMenuItemSelectionLogger"),
+  contexts: ["selection"]
+}, onCreated);
+
+chrome.contextMenus.create({
+  id: "remove-me",
+  title: chrome.i18n.getMessage("contextMenuItemRemoveMe"),
+  contexts: ["all"]
+}, onCreated);
+
+chrome.contextMenus.create({
+  id: "separator-1",
+  type: "separator",
+  contexts: ["all"]
+}, onCreated);
+
+chrome.contextMenus.create({
+  id: "greenify",
+  type: "radio",
+  title: chrome.i18n.getMessage("contextMenuItemGreenify"),
+  documentUrlPatterns: ["*://developer.mozilla.org/*"],
+  contexts: ["all"],
+  checked: true
+}, onCreated);
+
+chrome.contextMenus.create({
+  id: "bluify",
+  type: "radio",
+  title: chrome.i18n.getMessage("contextMenuItemBluify"),
+  documentUrlPatterns: ["*://developer.mozilla.org/*"],
+  contexts: ["all"],
+  checked: false
+}, onCreated);
+
+chrome.contextMenus.create({
+  id: "separator-2",
+  type: "separator",
+  contexts: ["all"]
+}, onCreated);
+
+var checkedState = true;
+
+chrome.contextMenus.create({
+  id: "check-uncheck",
+  type: "checkbox",
+  title: chrome.i18n.getMessage("contextMenuItemUncheckMe"),
+  contexts: ["all"],
+  checked: checkedState
+}, onCreated);
+
+/*
+Set a colored border on the document in the given tab.
+*/
+var blue = 'document.body.style.border = "5px solid blue"';
+var green = 'document.body.style.border = "5px solid green"';
+
+function borderify(tabId, color) {
+  chrome.tabs.executeScript(tabId, {
+    code: color
+  });
+}
+
+/*
+Toggle checkedState, and update the menu item's title
+appropriately.
+
+Note that we should not have to maintain checkedState independently like
+this, but have to because Firefox does not currently pass the "checked"
+property into the event listener.
+*/
+function updateCheckUncheck() {
+  checkedState = !checkedState;
+  if (checkedState) {
+    chrome.contextMenus.update("check-uncheck", {
+      title: chrome.i18n.getMessage("contextMenuItemUncheckMe"),
+    });
+  } else {
+    chrome.contextMenus.update("check-uncheck", {
+      title: chrome.i18n.getMessage("contextMenuItemCheckMe"),
+    });
+  }
+}
+
+/*
+The click event listener, where we perform the appropriate action given the
+ID of the menu item that was clicked.
+*/
+chrome.contextMenus.onClicked.addListener(function(info, tab) {
+  switch (info.menuItemId) {
+    case "log-selection":
+      console.log(info.selectionText);
+      break;
+    case "remove-me":
+      chrome.contextMenus.remove(info.menuItemId, onRemoved);
+      break;
+    case "bluify":
+      borderify(tab.id, blue);
+      break;
+    case "greenify":
+      borderify(tab.id, green);
+      break;
+    case "check-uncheck":
+      updateCheckUncheck();
+      break;
+  }
+});

context-menu-demo/icons/LICENSE

@@ -0,0 +1,2 @@
+
+The "page-32.png" and "page-48.png" icons are taken from the miu iconset created by Linh Pham Thi Dieu, and are used under the terms of its license: http://linhpham.me/miu/.

context-menu-demo/manifest.json

@@ -0,0 +1,30 @@
+{
+
+  "manifest_version": 2,
+  "name": "context-menu-demo",
+  "version": "1.0",
+  "default_locale": "en",
+
+  "applications": {
+    "gecko": {
+      "id": "context-menu-demo@mozilla.org",
+      "strict_min_version": "45.0"
+    }
+  },
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+  
+  "permissions": [
+    "contextMenus",
+    "activeTab"
+  ],
+  
+  "icons": {
+    "16": "icons/page-16.png",
+    "32": "icons/page-32.png",
+    "48": "icons/page-48.png"
+  }
+
+}