Google浏览器扩展程序开发案例展示（四）

在上一小节中，我们完成了第三个案例：给特定网站中的元素修改样式，文章链接如下：

在本小节中，我们再来看一个案例，用户在浏览网页的时候，经常会遇到一些不认识的英文单词或者想要查询的某些专有名词等，该扩展程序能够帮助用户通过百度浏览器搜索网页中选中的内容，并展示在新的标签页，请看效果展示：

图1 - hahaBaidu搜索

图2 - 搜索结果展示

接下来，我们开始本文内容的讲解。

参考资料

➡️ Google API Reference：https://developer.chrome.com/docs/extensions/reference/

1. 新建项目

首先，我们新建一个文件，取名 google_demo4，该文件中包含扩展程序配置文件（manifest.json）后台脚本文件（eventPage.js），如图所示：

图3 - 文件夹内容展示
完成了项目的准备工作之后，我们就可以开始写代码了。

2. 扩展程序文件配置（manifest.json）

首先，我们新建一个 manifest.json 配置文件，并作如下配置，请看配置代码：

{
  "manifest_version": 2,
  "name": "hahaBaidu",
  "version": "1.0",
  "description": "Search what you want on baidu",
  "background": {
    "scripts": ["eventPage.js"],
    "persistent": false
  },
  "permissions": [
    "tabs","contextMenus"
  ]
}

上述配置文件中，我们对扩展程序主要做了如下配置：

• 该扩展程序的名称（name）为 hahaBaidu，简介（description）为 Search what you want on baidu，当前版本（version）为 1.0版本，所使用的配置文件语法标准为 MV2；
• 该扩展程序属于事件驱动类型，只有当用户触发对应事件时，该扩展程序才能被访问；
• 该扩展程序的可用权限包括 tabs 和 contextMenus ；

3. 后台脚本文件（eventPage.js）

该扩展程序没有默认的弹出界面，我们直接来看该扩展程序的后台业务逻辑：首先我们需要创建一个 contextMenus，并指定其id、title和contexts，请看代码：

var menuItem = {
    "id":"baidu",
    "title":"hahaBaidu",
    "contexts":["selection"]
}
chrome.contextMenus.create(menuItem)

上述代码中，我们指定了该菜单的 id（baidu）、title（hahaBaidu）以及contexts（selection），接下来我们来分析一下当输入关键词之后，百度搜索链接的具体结构，我们打开百度首页，其官网地址如下所示：https://www.baidu.com/

图4 - 百度搜索界面

接着我们输入关键词 石璞东，并打开「开发者工具」，选中「Network」选项，找到从服务器成功请求的第一条文件，如图所示：

图5 - 真实搜索地址

我们重点来看一下 Request URL 字段，经过分析我们知道，该搜索链接的组成包括 网络协议（https） + 域名 + 编码后的关键词 + 其他参数，请看下图中对于请求参数的描述：

图6 - 搜索地址参数

经过上述分析我们知道，该链接中最重要的参数就是编码后的关键词，所以如果我们需要构造一个请求链接，最为关键的就是对用户在网页中选中的关键词进行编码，请看编码的函数：

function fixedEncodeURI(str){
    return encodeURI(str).replace(/%5B/g,'[').replace(/%5D/g,']')
}

请看效果展示：

图7 - 编码函数效果展示

所以我们可以通过如下代码去构造一个请求链接，请看演示代码：

var baiduUrl = "https://www.baidu.com/s?wd="+fixedEncodeURI("这里是用户输入的内容")

完成 contextMenus 的创建和对关键词进行编码的准备工作之后，我们来处理当用户触发点击事件之后的业务逻辑，思路很简单，用户选中网页内容之后，点击 contextMenus 中的 item，即可通过百度搜索去查询所选中的内容，并展现在新的标签页当中，请看代码：

chrome.contextMenus.onClicked.addListener(function (clickData){
    console.log("clickData",clickData)
    if(clickData.menuItemId =="baidu" && clickData.selectionText){
        var baiduUrl = "https://www.baidu.com/s?wd="+fixedEncodeURI(clickData.selectionText)
        var createData = {
            "url":baiduUrl,
            "type":"popup",
            "top":5,
            "left":5,
            "width":screen.width/2,
            "height":screen.height/2
        }
        chrome.windows.create(createData,function (){})
    }
})

上述代码中，我们对新的标签页做了一些约束，包括偏移量（left、top）以及窗口大小（width、height）等。

4. 效果展示

当所有代码编写完成之后，我们将该扩展程序安装在自己的本地计算机上，具体的安装步骤这里不再赘述，安装成功之后，将刚刚上传的扩展程序固定在工具栏中，我们随意打开一个有文字内容的网页，并选中想要查询的内容，然后通过我们刚刚上传的扩展程序去完成百度搜索的操作，请看效果：

图8 - 最终效果展示

图9 - 搜索效果展示

6. 文章最后

以上就是本文的所有内容，小伙伴们学会了嘛？快去实践一下吧！
「注」本文完整代码已上传至Github，地址：https://github.com/TURBO1002/GoogleExtensions