在上一小节中,我们完成了第三个案例:给特定网站中的元素修改样式,文章链接如下:
在本小节中,我们再来看一个案例,用户在浏览网页的时候,经常会遇到一些不认识的英文单词或者想要查询的某些专有名词等,该扩展程序能够帮助用户通过百度浏览器搜索网页中选中的内容,并展示在新的标签页,请看效果展示:
接下来,我们开始本文内容的讲解。
参考资料
➡️ Google API Reference:https://developer.chrome.com/docs/extensions/reference/
1. 新建项目
首先,我们新建一个文件,取名 google_demo4,该文件中包含扩展程序配置文件(manifest.json)后台脚本文件(eventPage.js),如图所示:
完成了项目的准备工作之后,我们就可以开始写代码了。
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/
接着我们输入关键词 石璞东,并打开「开发者工具」,选中「Network」选项,找到从服务器成功请求的第一条文件,如图所示:
我们重点来看一下 Request URL 字段,经过分析我们知道,该搜索链接的组成包括 网络协议(https) + 域名 + 编码后的关键词 + 其他参数,请看下图中对于请求参数的描述:
经过上述分析我们知道,该链接中最重要的参数就是编码后的关键词,所以如果我们需要构造一个请求链接,最为关键的就是对用户在网页中选中的关键词进行编码,请看编码的函数:
function fixedEncodeURI(str){
return encodeURI(str).replace(/%5B/g,'[').replace(/%5D/g,']')
}
请看效果展示:
所以我们可以通过如下代码去构造一个请求链接,请看演示代码:
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. 效果展示
当所有代码编写完成之后,我们将该扩展程序安装在自己的本地计算机上,具体的安装步骤这里不再赘述,安装成功之后,将刚刚上传的扩展程序固定在工具栏中,我们随意打开一个有文字内容的网页,并选中想要查询的内容,然后通过我们刚刚上传的扩展程序去完成百度搜索的操作,请看效果:
6. 文章最后
以上就是本文的所有内容,小伙伴们学会了嘛?快去实践一下吧!
「注」本文完整代码已上传至Github,地址:https://github.com/TURBO1002/GoogleExtensions