Chrome擴展插件案例：單詞查詢
在頁面內選中單詞，右鍵菜單中顯示詞典連接，自動將選中單詞發送至該詞典查詢
創建項目文件夾，在文件夾內創建一下文件
manifest.json:
{"manifest_version":2,//版本號，由google指定的manifest格式版本為2"name": "有道詞典查詢（第三方）",//插件名稱"version":"1.0",//插件版本"description":"在網頁內選中任意單詞后，用鼠標右鍵菜單查詢",//插件描述"icons":{"128":"img/icon.png","48":"img/icon.png","16":"img/icon.png"},"browser_action":{"default_icon":"img/icon.png","default_popup":"popup.html"},"background":{"scripts":["background.js"],//關聯的代碼"persistent":true //在頁面上一直運行},"permissions":[ "contextMenus"]}popup.html:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>有道詞典查詢</title>
</head>
<body><!--點擊瀏覽器插件圖標時會彈出的內容--><h1 style="color:red;width:200px;">有道詞典查詢</h1><p>在頁面選中單詞后，鼠標右鍵菜單中選擇“有道詞典查詢”</p>
</body>
</html>
background.js
chrome.contextMenus.create({id:"YoudaoDictionarySearch",title: '有道英漢詞典查詢：%s', // %s表示選中的文字contexts: ['selection'], // 只有選中頁面內文字時才會出現此右鍵菜單onclick: function(params) {//創建新的標簽頁chrome.tabs.create({url: 'https://www.youdao.com/result?lang=en&word=' + encodeURI(params.selectionText)});}
});然后在Chrome瀏覽器中地址欄右邊 -> 拓展程序 -> 管理拓展程序 -> 打開“開發者模式” -> 加載已解壓的擴展程序? -> 大功告成！
