diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 491933c..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/context-menu-demo/README.md b/context-menu-demo/README.md new file mode 100644 index 0000000..998b0b3 --- /dev/null +++ b/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. diff --git a/context-menu-demo/_locales/en/messages.json b/context-menu-demo/_locales/en/messages.json new file mode 100644 index 0000000..019bad4 --- /dev/null +++ b/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." + } + +} diff --git a/context-menu-demo/background.js b/context-menu-demo/background.js new file mode 100644 index 0000000..b144313 --- /dev/null +++ b/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; + } +}); diff --git a/context-menu-demo/icons/LICENSE b/context-menu-demo/icons/LICENSE new file mode 100644 index 0000000..20e821d --- /dev/null +++ b/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/. diff --git a/context-menu-demo/icons/page-16.png b/context-menu-demo/icons/page-16.png new file mode 100644 index 0000000..a6fed5c Binary files /dev/null and b/context-menu-demo/icons/page-16.png differ diff --git a/context-menu-demo/icons/page-32.png b/context-menu-demo/icons/page-32.png new file mode 100644 index 0000000..dae663d Binary files /dev/null and b/context-menu-demo/icons/page-32.png differ diff --git a/context-menu-demo/icons/page-48.png b/context-menu-demo/icons/page-48.png new file mode 100644 index 0000000..ba042cd Binary files /dev/null and b/context-menu-demo/icons/page-48.png differ diff --git a/context-menu-demo/manifest.json b/context-menu-demo/manifest.json new file mode 100644 index 0000000..15e8c71 --- /dev/null +++ b/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" + } + +}