From 3b15010327db8939f567af96193f6f0e5e35aadd Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Mon, 23 May 2016 15:05:14 -0700 Subject: [PATCH] Added a demo of the contextMenus API --- .DS_Store | Bin 10244 -> 0 bytes context-menu-demo/README.md | 28 ++++ context-menu-demo/_locales/en/messages.json | 42 ++++++ context-menu-demo/background.js | 135 ++++++++++++++++++++ context-menu-demo/icons/LICENSE | 2 + context-menu-demo/icons/page-16.png | Bin 0 -> 251 bytes context-menu-demo/icons/page-32.png | Bin 0 -> 344 bytes context-menu-demo/icons/page-48.png | Bin 0 -> 310 bytes context-menu-demo/manifest.json | 30 +++++ 9 files changed, 237 insertions(+) delete mode 100644 .DS_Store create mode 100644 context-menu-demo/README.md create mode 100644 context-menu-demo/_locales/en/messages.json create mode 100644 context-menu-demo/background.js create mode 100644 context-menu-demo/icons/LICENSE create mode 100644 context-menu-demo/icons/page-16.png create mode 100644 context-menu-demo/icons/page-32.png create mode 100644 context-menu-demo/icons/page-48.png create mode 100644 context-menu-demo/manifest.json diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 491933c97d2f1bd551c9c41a01bddcce939f8c98..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10244 zcmeI1TWl0n7{|Y_6qtqCGUeJ9A*)TG=r-;`w^cB*y&#|<)h)DzLY>{2wqs{!mYvxa zSew+u7$GKVi1G4bL<=WlBnM~XBL+2HefIY;+)N# z@7%sKXMXdaGjq-Y0Ji0{C_o4RBs!Q?WQxiJR?m(Jp~5SvCX3_`;DP}Iusb>GWG1xs z3w#1T0iS?Rz$f4nxE2V|JDUY*rm%kO6YvT61TGL@^FxRZX5*e67nV;Q6!9eh*-9$r zfzq@N;65SG#yvYOEO(_o#p(e)SM-(`DBP(&#F~?hdv;t{;SMO=0lhP$w?aXFcJd4H z=74cw{n#hq6PQSVt=%O^f(|M;#q0N^X(y@f_hiO295)gWeisrE~WxpgXTo!BH*qa&Kci^RiFCRL5uu3w}HiWsJy%M z+x4UHntXnFEJin}srm8(|L9|)NMTZevj^ZGVk^0U0ocjz10f#v@asijf4zRdF39I& z&Ee3Brs(Clo;b;|PR^BaFGI#0j3!ccx_D!>Tq|d!QwX!-#R9+c7pLBtaw1ioZ6%C7dcQKup?P>cWxeUKU#U*1W-4c@uHI^ztdY~5vdvuDa#-tB);7&f+c8|j zwt9P9eV1G4=#r|Qt&W{_+qq-EqU0R?ex3R>M)VHqnYxpHZi&Qhzw?YzJ$ugFd9u8f=5xz61`IvBd6Z4+y{ePaEzPh7yGPiJZt7i@ zn%1i^90+i)+Pa|Jr_uQ~+8XoIlw*>pSzH$kZeum=S)F1{lDNZ7^+CDIp=(xDui?@L zS?(I9*NWnJorW9b;AT@z>ZYOvgj;mE9PAzu7opta6*kY4gFST9(llttD_glL7~H{5 zyFqo_O&Q&yA$`iuy*l37MnjtHx_X&UtERDm)(b`e_3;J|7k#%%un3mW?6d*8Xcygv zhv9K}0gl3Za2(!;&)_tC1K+_<@C*C_f5Kk~7{K{hgSA+P^>`~rFp4X2HMU|Kw&Mo8 z4-?phn{fwfIDmsVggbFJ=J6pM!$Hr4b%}zfihCP zj8MOXui<+pQbe4FRX7JjxQyf(BWbS1^(4%VcrSKiFK)v=+)mOQ!Uu5}P0Zma33Lxh z^br#1W4IUh;eLD?pTTGGIXr*|@em%yBlsr1g-7ui9>)*xLp*_>XXF%!Jp}+q3HWK{xKikCkKdk@% E20aJ#WB>pF 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 0000000000000000000000000000000000000000..a6fed5ce35db2eec07aa361536fb6ba9817b389a GIT binary patch literal 251 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`EX7WqAsj$Z!;#Vf4nJ za0`PlBg3pY5t|=cq7;*`i57AB^IBSk^BPThyw) zK``gYHNQo^O^PapYabjqV3a@eZ~TMBdP!HU9!KyTz9W;|k=|N9C^o z+Gk#IDQL#{UHa3;cTFPYbfBkW#EI&a;xEnBUOWy7ogg^nWhl=qfhVFSnm>g9*c{yP s%*w~`kQsN>&g0cxGipAvO4~f(O>s1qoy@j-5740up00i_>zopr001sm+yDRo literal 0 HcmV?d00001 diff --git a/context-menu-demo/icons/page-32.png b/context-menu-demo/icons/page-32.png new file mode 100644 index 0000000000000000000000000000000000000000..dae663dbb4989c607cb29de15c2d5300060c459d GIT binary patch literal 344 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8wRq zxP?KOkzv*x383IFPZ!6Kh}O5)?7f%+1&)984`Ja~^yE|2Fx%-6#VyUBIMq6$fry* z{)J8Fd3GP*J~orN!QCe1*}CZ82Uh4?Y-tpd$}%(TVU<-8+kGtZ$xq&UR(}?6>*N%R z?OZ7x(RII8_N44~Um5j%-1W&1s|yC9yDm!jKi9ar+^ zNc`vx(*!cU_)S_JTgN^rL~;dB2%8r3)W%Z|sSAt*ZXekB?EQ`wKU1GS7wQxq3b@a* kp0>Z(uE>6;pio#-$q%07HSn)78&qol`;+0OH(%rvLx| literal 0 HcmV?d00001 diff --git a/context-menu-demo/icons/page-48.png b/context-menu-demo/icons/page-48.png new file mode 100644 index 0000000000000000000000000000000000000000..ba042cdcd5f88b6666d52e2ff60c3c963bc5ac35 GIT binary patch literal 310 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCmSQK*5Dp-y;YjHK@;M7UB8wRq zxP?KOkzv*x383H&PZ!6KjK;S!y}1rK2(Wq!+J}Fc($%%7d_v6O)^v&R%>f)IRW4U{ ztzR(xvhCEgduj>$=CgS?mNJ`NWD1;qzO;ARiRMMW)E+RcVNTn_+x2SpYo7^6LYO!$ z7+0@w46L<(?UCAP)_Cc7RMEeHU?;^14YnJ4L?lj6&g+crbqr*Re&G1?Sy!jf3Zrtn zgRV}IJr>c`+M5;I|5Y(J?~BN-t78@mcq|eGM9GY%eu^N3MIiVSo5+6-tCyP_)&7XR fz0