谷歌插件04(选中文字并右键翻译)

需求
当我们选中网页上的文字并右键时,在菜单中显示“使用谷歌翻译”选项,点击该选项后弹出谷歌翻译的窗口并将选中文字翻译成英文。
目录结构
谷歌插件04(选中文字并右键翻译)_第1张图片
主要知识点
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

你可能感兴趣的:(chrome插件)