转自：https://www.toolchest.cn
视频教程和源码见文章结尾，若无法观看或下载源码请访问原文
大家好，欢迎来到chrome浏览器插件开发，前面我们已经将browser_action和page_action类型的插件进行了讲解，本次课程，我们将通过一个案例对前期知识做一个综合回顾。
需求：当我们选中网页上的文字并右键时，在菜单中显示“使用谷歌翻译”选项，点击该选项后弹出谷歌翻译的窗口并将选中文字翻译成英文。
目录结构
主要知识点：contextMenus和window的创建
主要步骤
1.manifest.json中声明background和permissions
"background":{
"scripts":["js/translate.js"],
"persistent":false
},
"permissions":[
"contextMenus"
]
2.在background中创建contextMenus并监听点击事件
var menuItem = {
"id" : "translate",
"title": "使用谷歌翻译",
"contexts": ["selection"]
};
chrome.contextMenus.create(menuItem);
3.创建window显示翻译结果
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.插件安装与测试
略
相关API
chrome.windows.create(object createData, function callback)
创建（打开）一个新的浏览器窗口，可以提供大小、位置或默认 URL 等可选参数。
参数
createData( optional object )
属性
url( optional string or array of string )
要在窗口中打开的一个 URL 或 URL 数组。完整的 URL 必须包含协议（即 “http://www.google.com”，而不是 “www.google.com”），而相对 URL 相对于扩展程序中的当前页面。默认为“打开新的标签页”页面。
tabId( optional integer )
需要移动至新窗口的标签页标识符。
left( optional integer )
新窗口与屏幕左侧的距离，以像素为单位。如果未指定，新窗口将自然地与最后一个活动窗口偏离一定的距离。对于面板将忽略这一值。
top( optional integer )
新窗口与屏幕顶部的距离，以像素为单位。如果未指定，新窗口将自然地与最后一个活动窗口偏离一定的距离。对于面板将忽略这一值。
width( optional integer )
新窗口的宽度（包含边框），以像素为单位，如果未指定则默认为自然宽度。
height( optional integer )
新窗口的高度（包含边框），以像素为单位，如果未指定则默认为自然高度。
focused( optional boolean )
如果为true，则打开一个活动窗口；如果为false，则打开一个不活动窗口。
incognito( optional boolean )
新窗口是否为隐身窗口。
type( optional enum of"normal","popup","panel", or"detached_panel")
指定要创建的浏览器窗口类型。除非设置了“–enable-panels”标志，”panel” 与 “detatched_panel” 类型都会创建弹出窗口。
callback( optional function )
如果您指定了callback参数，它应该指定一个如下形式的函数：
function(Window window) {...};
window( optional Window )
包含已创建窗口的详情。