2025年3月19日 星期三 甲辰(龙)年 月十八 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Other

小技巧 | Get 到一个 Web 自动化方案,绝了!

时间:10-13来源:作者:点击数:40

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": [
  •     {
  •         // "<all_urls>" 表示匹配所有地址
  •         "matches": ["<all_urls>"],
  •         // 执行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"// 阻塞式的网络请求
  •         "<all_urls>"// 匹配的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'truetrue);
  •     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 引入脚本及他们之间的数据传输,这部分内容大家可以自行扩展

已经将文中所有源码上传:链接: https://pan.baidu.com/s/15NQ28Gnjy2mtoUgL6wKpkg  密码: 5v8v

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门
本栏推荐