需求
当我们选中网页上的文字并右键时,在菜单中显示“使用谷歌翻译”选项,点击该选项后弹出谷歌翻译的窗口并将选中文字翻译成英文。
目录结构
主要知识点:
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);
}
})
源码
链接:https://pan.baidu.com/s/1hWQo...
提取码:sar6