Google浏览器扩展程序开发案例展示(四)
2021-01-25 14:24:50

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

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

效果展示

图1 - hahaBaidu搜索

搜索结果展示

图2 - 搜索结果展示

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

参考资料

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

1. 新建项目

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

demo

图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) + 域名 + 编码后的关键词 + 其他参数,请看下图中对于请求参数的描述:

search

图6 - 搜索地址参数

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

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

请看效果展示:

shipudong

图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