Chrome 插件開發：愛詞霸翻譯插件

本文轉載自個人博客：osc格式化太差，可移步到原文地址查看.

最近在研究chrome擴展的開發，想作一些有用的東西。今天作一個翻譯擴展。功能很簡單，就是當用戶選中網頁的文字後，右鍵會出現一個選項，"使用愛詞霸翻譯...", 用戶點擊該選項後會打開一個新的標籤頁，直接跳轉到愛詞霸官網關於該內容的翻譯頁。 如圖：

點擊後跳轉：

 

首先創建一個本地目錄: iciba_translator , 存放位置隨意。在該目錄下新建一個image目錄，存放一個icon16.png的圖片，這是擴展的圖標。而後新建 manifest.json和menu.js 文件。這就是擴展所須要的所有文件。代碼和資源能夠在文章結尾處的地址下載。 載入擴展的方法：能夠從chrome的偏好設置->擴展，進入或者直接在chrome輸入：chrome://extensions/。而後點擊加載已解壓的擴展，找到擴展的本地目錄，點擊選擇。 如圖：

 

下面開始寫代碼： 向 manifest.json 文件寫入如下內容：

{
"name": "愛詞霸翻譯",
"description": "在http://www.iciba.com/翻譯網頁指定的文字",
"version": "1.0",
"background": {
"scripts": ["menu.js"]

},

"permissions": [
"contextMenus"
],
"icons": {
"16": "images/icon16.png",
"48": "images/icon16.png",
"128": "images/icon16.png"
},
"manifest_version": 2
}

這是擴展的資源清單。清單文件的詳細內容能夠參考： http://open.chrome.360.cn/extension_dev/manifest.html 最重要的兩點： 1.permissions裏要使用contextMenus權限，這是調用右鍵菜單的權限。 2."background"下面使用的menu.js是背景頁面，也是是擴展實際的邏輯的實現。最後還要注意 "manifest_version" 這個值只能是2，不然沒法加載擴展。 接着咱們寫menu.js的代碼：

chrome.contextMenus.create({
"type": "normal",
"title": "使用愛詞霸翻譯:%s",
"contexts": ['selection'],
"onclick" : translate,
});

function translate (info, tab) {
var url = 'http://www.iciba.com/'+info.selectionText;
window.open(url,'_blank');
}

其中 chrome.contextMenus.create 建立了一個菜單，type爲normal表示普通菜單，是菜單的默認值，也可不填，固然菜單還有其餘的值，好比radio,seprators等，可參考：http://open.chrome.360.cn/extension_dev/contextMenus.html，title是顯示在菜單的文字，用%s進行佔位，這樣當選中網頁的文字時，內容會自動填充到該位置。contexts 表示上下文，即在什麼場景下顯示菜單，咱們但願在選中網頁文字時顯示，因而填入selection。onclick是點擊菜單後的回調函數。回調函數接收兩個參數，一個是點擊後的相關信息，一個是當前標籤的信息。詳細內容可使用console.log查看。 注意，由於背景頁沒有實際的視圖, 因此調試背景圖的時候須要在擴展頁點擊：檢查視圖：背景頁 下的連接。

github地址：https://github.com/falconchen/iciba_translator