小技巧 | Get 到一个 Web 自动化方案，绝了！
?
1. 前言
大家好，我是安果！
无论是 Chrome，还是 Firefox 浏览器，它们的强大性在很大程度上都是依赖于海量的插件，让我们能高效办公
那我们是否可以编写一个插件，让浏览器自动化完成一些日常工作，解放双手呢？
答案是肯定的
本篇文章以 Chrome 插件为例，结合一个实例，聊聊 Web 端自动化的另一种方案
2. Chrome 插件
Chrome 扩展插件运行于基于?Chromium 内核的浏览器
包含：Chrome 浏览器、Microsoft Edge、360 浏览器等
一个 Chrome 扩展插件有 3 类文件组成，包含：
-
配置文件 manifest.json
-
js 脚本文件
-
图片、css 等资源文件
配置文件「?manifest.json?」用于配置扩展的名称、版本号、作者、图标 icon、弹出界面、权限、脚本路径等信息
js 脚本文件包含 popup.js、background? 和?content_scripts
其中
-
popup.js 用于搭配 popup.html 使用，用于点击插件图标的时候展示页面及页面逻辑控制
-
background?用于定义一个后台页面，相当于一个常驻页面，生命周期和浏览器一致
-
content_scripts 用于注入 JS 脚本，它不会和页面中的脚本产生冲突
3.?实战一下
假设我们现在需要完成一个插件，在首次登录或登录失效时，自动完成登录操作
3-1? 创建项目
我们创建一个文件夹，项目结构目录如下
3-2? 项目配置
我们在 manifest.json 配置文件中，首先设置插件的基本信息
#?mainifest.json
{
????"manifest_version":?2,?//配置文件版本
????"name":?"auto_login",?//插件名称
????"version":?"0.0.1",?//插件版本
????//下面都是选填
????"description":?"自动登录",?//描述信息
????"author":?"xag",?//作者
????//?插件icon
????"icons":?{
????????"84":?"./image/icon.png"
????}
...
然后，设置浏览器插件的图标及后台页面
需要注意的是，后台页面 background?可以设置一个 HTML 页面，也可以设置 JS 脚本列表，且只能选择其中一种
#?mainifest.json
//?浏览器右上角的图标和内容
"browser_action":?{
????"default_icon":?"./image/icon.png",
????"default_title":?"自动登录",
????"default_popup":?"./html/popup.html"?//点击插件图标，弹出来的界面
},
//后台页面，JS/HTML只能选择一种
"background":?{
????"scripts":?["./js/background.js"],
????"persistent":?true
},
...
接着，使用关键字「 content_scripts 」配置匹配规则及注入 JS 脚本
#?mainifest.json
//content-scripts脚本设置
"content_scripts":?[
????{
????????//?""?表示匹配所有地址
????????"matches":?[""],
????????//?执行JS
????????"js":?["./js/content.js"],
????????"run_at":?"document_end"?//配置运行时间点
????},
????{
????????"matches":?["https://****/"],
????????"js":?["./js/content_vx.js"],
????????"run_at":?"document_end"
????}
],
...
这里设置所有的页面都会执行 content.js?脚本，当匹配到第二个页面时，执行 content_vx.js?脚本
需要指出的是，run_at 设置为 document_end，代表当页面加载完成后，才会执行目标脚本
最后，根据业务需要，使用关键字「 permissions 」定义权限
PS：本例不涉及权限，可以省略设置
#?manifest.json
...
//权限配置
????"permissions":?[
????????"contextMenus",?//?右键菜单
????????"storage",?//?本地存储
????????"webRequest",?//?网络请求
????????"webRequestBlocking",?//?阻塞式的网络请求
????????"",?//?匹配的URL
????????"tabs",?//?标签
????????"notifications"?//?通知
????]
}
3-3? 编写注入脚本
在 content_vx.js 文件中，根据需求操作 DOM?元素，完成自动化的操作
比如，这里获取用户名、密码输入框，模拟输入，然后模拟点击登录按钮，完成登录的操作
需要注意的是，如果 run_at 设置为 document_start，这里需要做延迟加载
#?content_vx.js
//输入
function?input(inputElement,?content)?{
????let?evt?=?document.createEvent(‘HTMLEvents‘);
????evt.initEvent(‘input‘,?true,?true);
????inputElement.value?=?content;
????inputElement.dispatchEvent(evt)
}
//模拟输入和提交表单
//用户名
const?username_element?=?document.getElementById("ContentHtml_txtUserName");
//密码
const?password_element?=?document.getElementById("txtPassword");
//按钮
const?btn_element?=?document.getElementById("ContentHtml_btnLogin");
//输入后，点击确认
input(username_element,?"**");
input(password_element,?"**");
//登录
btn_element.click();
3-4? 测试使用
在定义好插件 icon 图标及 popup 页面后，我们可以进入到 Chrome 插件管理界面
开启「 开发者模式 」，然后点击左侧的「?加载已解压的扩展程序 」加载上面创建的项目文件夹
开启扩展插件，每次打开目标网站或退出登录时，会发现网页会自动完成登录操作
4. 最后
本例仅利用 content_scripts?注入一段脚本，通过操作 DOM 元素，将一个繁琐的登录操作做成自动化
实际上，复杂的 Chrome 插件会涉及到 background 配置、浮框布局?JS 脚本、inject-scripts 引入脚本及他们之间的数据传输，这部分内容大家可以自行扩展
?