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', 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 引入脚本及他们之间的数据传输,这部分内容大家可以自行扩展

我已经将文中所有源码上传到后台,关注公众号「 AirPython 」后回复关键字「 crx 」获取完整源码

如果你觉得文章还不错,请大家 点赞、分享、留言 下,因为这将是我持续输出更多优质文章的最强动力!

小技巧 | Get 到一个 Web 自动化方案,绝了!的更多相关文章

  1. 小技巧找出一个php的cron脚本出问题的代码行

    这个小技巧虽然很小,但是很有用. 我写了一个cron脚本,但是隔一天发现,这个昨天的cron脚本还一直在跑着,没有停下来,一定是里面有个程序堵住了. 但是如果我重新跑又需要很多时间.这个怎么办? 现在 ...

  2. Swift开发小技巧--TabBar中间按钮的添加方案

    TabBar中间按钮的添加方案 之前做百思项目的时候,也有一个中间按钮,当时是重写的TabBar,这里介绍一个新的方法 给TabbarVC多添加添加一个控制器,这个控制器的作用仅仅是用来占位的,多了这 ...

  3. 这一次,Google 终于对 Web 自动化下手了!

    大家好,我是安果! 最近 Google 对 Chrome 进行了一次比较大的更新,其中一项是脚本录制回放功能,它可以非常方便我们处理一些自动化场景 我们可以在 Chrome 官网下载 Chrome C ...

  4. 【flash】关于flash的制作透明gif的一个小技巧

    关于flash的制作透明gif的一个小技巧 或者说是一个需要注意的地方 1.导出影片|gif,得到的肯定是不透明的.2.想要透明背景,必须通过发布.3.flash中想要发布gif动画的话,不能有文字, ...

  5. IOS开发之代理的设计小技巧

    1.关于代理对象的设计小技巧 在设计一个类,需要通过代理和协议来从外部获取需要的动态的数据.那么在这里设计使用代理会有两种方法. <第一种方法> 也是比较常见的: 在你设计的类中,声明一个 ...

  6. jquery获取json对象中的key小技巧

    jquery获取json对象中的key小技巧 比如有一个json var json = {"name" : "Tom", "age" : 1 ...

  7. PHP 小技巧之__callStatic魔术方法使用

    使用 PHP 框架时,经常会用到 ORM 模型查询数据库,有没有疑问:为啥有些 ORM 中的静态查询方法,不能通过函数追踪下去呢,很有可能就是使用了 __callStatic 魔术方法的小技巧 这里贴 ...

  8. How Javascript works (Javascript工作原理) (二) 引擎,运行时,如何在 V8 引擎中书写最优代码的 5 条小技巧

    个人总结: 一个Javascript引擎由一个标准解释程序,或者即时编译器来实现. 解释器(Interpreter): 解释一行,执行一行. 编译器(Compiler): 全部编译成机器码,统一执行. ...

  9. 移动Web开发小技巧

    移动Web开发小技巧 添加到主屏后的标题(IOS) name="apple-mobile-web-app-title" content="标题"> 启用  ...

随机推荐

  1. 数据泵导入,报错:ORA-12899: value too large for column "SCOTT"."TEST112"."JOIN" (actual: 9, maximum: 8)

    1.报错: 数据泵执行导入时报错:ORA-12899: value too large for column "SCOTT"."TEST112"."J ...

  2. Java小工具类

    计时器(秒表),计算程序运行时间用的 public class Stopwatch { private static long startTime=0; private static long end ...

  3. 理解css行高(line-height)

    首先我们要明确 line-height 的定义,line-height指的是两条文字基线之间的距离. 行内框盒子模型 所有内联元素的样式表现都与行内框盒子模型有关.所以这个概念是非常重要的. < ...

  4. Qt5实现文本编辑器(附图片转PDF与详细代码)

    1. 功能介绍 老规矩,我们直接上截图 这是主界面 文件菜单界面 编辑菜单界面 设置菜单界面 关于菜单界面 2. 功能演示 设置字体颜色 设置字体大小 点击关于菜单 点击关于Qt菜单 会自动跳转到Qt ...

  5. 什么是CAP?

    1. 什么是CAP 是一种定理,多用于描述分布式架构,CAP这三个字母对应三种理念,且这三种理念只能两两组合,不能CAP三种理念同时共存(为什么?下面说). C:Consisteny(一致性) A:A ...

  6. oracle行转列实现

    1.新建测试表 create table TEST_TABLE( T1 VARCHAR2(10),--姓名 T2 VARCHAR2(10),--科目 T3 VARCHAR2(10)--成绩 ) 2.插 ...

  7. 【面试】详解同步/异步/阻塞/非阻塞/IO含义与案例

    本文详解同步.异步.阻塞.非阻塞,以及IO与这四者的关联,毕竟我当初刚认识这几个名词的时候也是一脸懵. 目录 1.同步阻塞.同步非阻塞.异步阻塞.异步非阻塞 1.同步 2.异步 3.阻塞 4.非阻塞 ...

  8. Linux:Ka li 2020.4 安装教程

    下载地址 Ka li官网 :https://www.kali.org install 版本是安装版,安装后使用: Live    版本可以直接启动运行: netinstaller  版本是网络安装版, ...

  9. shell中的特殊变量IFS

    shell中特殊变量IFS的使用 IFS是内部字段分隔符(internal field separator).默认情况下,bash shell会将空格.制表符.换行符 当做字段分隔符. IFS=$'\ ...

  10. 排序---python版

    冒泡排序: 比较相邻的元素.如果第一个比第二个大,就交换它们两个: 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对,这样在最后的元素应该会是最大的数: 针对所有的元素重复以上的步骤,除了最 ...