CHROME浏览器插件开发视频教程 第13课谷歌翻译案例

转自：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 )

包含已创建窗口的详情。

视频教程和源码见文章结尾，若无法观看或下载源码请访问原文

转自：https://www.toolchest.cn