轉(zhuǎn)自：https://www.toolchest.cn
視頻教程和源碼見文章結(jié)尾，若無法觀看或下載源碼請訪問原文
大家好，歡迎來到chrome瀏覽器插件開發(fā)，前面我們已經(jīng)將browser_action和page_action類型的插件進(jìn)行了講解，本次課程，我們將通過一個案例對前期知識做一個綜合回顧。
需求：當(dāng)我們選中網(wǎng)頁上的文字并右鍵時，在菜單中顯示“使用谷歌翻譯”選項，點擊該選項后彈出谷歌翻譯的窗口并將選中文字翻譯成英文。
目錄結(jié)構(gòu)
主要知識點：contextMenus和window的創(chuàng)建
主要步驟
1.manifest.json中聲明background和permissions
"background":{
? ? "scripts":["js/translate.js"],
? ? "persistent":false
},
"permissions":[
? ? "contextMenus"
]
2.在background中創(chuàng)建contextMenus并監(jiān)聽點擊事件
var menuItem = {
? ? "id" : "translate",
? ? "title": "使用谷歌翻譯",
? ? "contexts": ["selection"]
};
chrome.contextMenus.create(menuItem);
3.創(chuàng)建window顯示翻譯結(jié)果
chrome.contextMenus.onClicked.addListener(function(clickData){
? ? if(clickData.menuItemId == "translate" && clickData.selectionText){
? ? ? ? var createData = {
? ? ? ? ? ? url: "https://translate.google.cn/?sl=zh-CN&tl=en&text="+clickData.selectionText+"&op=translate",
? ? ? ? ? ? type: "popup",
? ? ? ? ? ? top: 5,
? ? ? ? ? ? left: 5,
? ? ? ? ? ? width: screen.availWidth/2,
? ? ? ? ? ? height: screen.availHeight/2
? ? ? ? }
? ? ? ? chrome.windows.create(createData);
? ? }
})
4.插件安裝與測試
略
相關(guān)API
chrome.windows.create(object createData,?function callback)
創(chuàng)建（打開）一個新的瀏覽器窗口，可以提供大小、位置或默認(rèn) URL 等可選參數(shù)。
參數(shù)
createData(?optional?object )
屬性
url(?optional?string or array of string )
要在窗口中打開的一個 URL 或 URL 數(shù)組。完整的 URL 必須包含協(xié)議（即 “http://www.google.com”，而不是 “www.google.com”），而相對 URL 相對于擴(kuò)展程序中的當(dāng)前頁面。默認(rèn)為“打開新的標(biāo)簽頁”頁面。
tabId(?optional?integer )
需要移動至新窗口的標(biāo)簽頁標(biāo)識符。
left(?optional?integer )
新窗口與屏幕左側(cè)的距離，以像素為單位。如果未指定，新窗口將自然地與最后一個活動窗口偏離一定的距離。對于面板將忽略這一值。
top(?optional?integer )
新窗口與屏幕頂部的距離，以像素為單位。如果未指定，新窗口將自然地與最后一個活動窗口偏離一定的距離。對于面板將忽略這一值。
width(?optional?integer )
新窗口的寬度（包含邊框），以像素為單位，如果未指定則默認(rèn)為自然寬度。
height(?optional?integer )
新窗口的高度（包含邊框），以像素為單位，如果未指定則默認(rèn)為自然高度。
focused(?optional?boolean )
如果為true，則打開一個活動窗口；如果為false，則打開一個不活動窗口。
incognito(?optional?boolean )
新窗口是否為隱身窗口。
type(?optional?enum of"normal","popup","panel", or"detached_panel")
指定要創(chuàng)建的瀏覽器窗口類型。除非設(shè)置了“–enable-panels”標(biāo)志，”panel” 與 “detatched_panel” 類型都會創(chuàng)建彈出窗口。
callback(?optional?function )
如果您指定了callback參數(shù)，它應(yīng)該指定一個如下形式的函數(shù)：
function(Window window) {...};
window(?optional?Window?)
包含已創(chuàng)建窗口的詳情。
