前端不止 CRUD，还能当 Spider Man

基于 Electron + Puppeteer + ChromeExtension 的低代码可视化网络爬虫，相比 rpa 软件，更了解 DOM。

本文先介绍以上三个工具是什么，以及将这三个工具结合起来能捣鼓出一个什么东西。

获取Spider Man

下载地址： github.com/qianqianhai...

项目仓库：github.com/qianqianhai...

使用文档请查看： sunsilent.gitee.io/junk-puppet...

三个工具

首先介绍三个工具： Electron + Puppeteer + ChromeExtension

Electron

可以先理解给一个包含了 Chromium 和 Node.js环境 的可以在操作系统中直接运行的可执行文件

Puppeteer

可以理解为一个封装了非常非常多 CDP 命令的库。 CDP 是什么，Chrome DevTools Protocol。可直接与 Chromium 内核通信

ChromeExtension

谷歌插件开发。这里主要使用了 content_scripts，可以在指定页面打开的某个时间段注入指定脚本

介绍完了？是的，目前大家只需要知道这三个工具主要是干什么的就行了。目前前端圈的工具实在是太多了，没必要都深入理解。思考将哪些工具结合起来会碰撞出 love 的火花，大家有了想法之后，再深入了解验证可行性即可。

SpiderMan 概念

我们将捣鼓出来的东西暂且先叫做 猪猪侠 吧, 我将 猪猪侠 项目划分为了三个角色

管理者（Electron），负责统筹调度
收集者（content_scripts），负责收集必要信息
执行者（Puppeteer），负责执行操作

管理者

我们这些 js 工具的使用必要要依赖 Node 环境，所以 Electron 作为一个内置了 Chromium 和 Ndoejs 的工具理所应当的成为了管理者。

整个 Electron 应用的坐落在操作系统层面的，Electron 又分为两个进程，一个是渲染进程（可以暂理解为前端），一个是主进程（可以暂理解为后端）

管理者的作用的给与使用者一个 UI 可交互页面，并且负有数据记录、管理子进程的运行和通信的任务

收集者

这个是收集过程图

我们在 Electron 应用中通过 主进程 启动一个 子进程（child_process） 运行 Puppeteer

Puppeteer 是一个封装了非常多 CDP 命令的库，我们通过 Puppeteer 打开浏览器，并且加载了一个 ChromeExtension

这个插件向我们打开的目标页面中注入了一段 javascript 代码（content_scripts）。

下面的重点就是，注入的这一段 javascript 代码运行了什么，它的的作用是什么？

既然将这一流程称之为收集者，肯定是收集数据了。

首先是收集用户无感知操作内容，包括鼠标事件、滚动事件和键盘事件。

之所以要记录用户无感知操作内容一方面是对抗反爬，有些网站会通过鼠标手势等对爬虫进行检测，其次是更加真实的还原用户操作过程

其次是收集用户执行的内置函数功能，比如我们之内好的提取文本、提取元素截图、提取网页截图和延迟等

之后将收集好的数据反馈给管理者，由管理者进行归档整理。

至此，收集者的任务结束（当然这只是一个简单的收集者模型，收集者还需要兼顾页面导航，及时反馈等内容）

执行者

执行者的任务就简单了，通过 Puppeteer 发送 CDP 命令给 Chromium 内核执行对应的操作

然后 Puppeteer 将执行的结果反馈给主进程进程进行记录

根据每个操作的类型执行对应的操作，并记录结果

项目详解

Electron应用入口及通信

首先，Electron应用程序至少存在着两个进程，一个是主进程一个是渲染进程。

渲染进程提供了一个我们可以交互的界面，而我们所有的交互最终都会反馈给主进程。

那么，我们就需要先建立两个进程间的通信代码位置

通过 Electron官方资料了解进程间通信

在建立了主渲进程通信之后，我们就可以通过 渲染进程提供的UI界面中的一个按钮 去调用 主进程中的函数

通过 Puppeteer 去打开浏览器并注入content_scripts

我们通过在Electron中通过Puppeteer去操作浏览器，原理很简单，Puppeteer作为一个封装了极其丰富CDP命令的库，通过简单的函数调用即可实现与Chromium内核的通信代码位置

我们通过Puppeteer打开浏览器时可以传递一个自动加载一个ChromeExntesion的参数。代码位置

当指定页面打开时，这个ChromeExtension自动将我们的内容脚本（content_scirpts）加载在页面中，这个内容脚本就是我们的收集者

收集者是单独开发的ChromeExtension是为了避免过度的依赖Puppeteer，方便后续集成在非Node环境代码位置

收集者主要负责监听全局事件（代码位置）和内置函数功能（代码位置1 代码位置2）

在收集者收集完数据之后会将收集结果反馈给Puppeteer

content_scripts 和 Puppeteer之间的通信是通过 postMessage 实现的 Puppeteer收 content_scripts发

通过 Puppeteer 还原用户操作

在我们拿到收集者收集到的用户操作数据之后，接下来就是还原用户操作

我们通过Electron中 Puppeteer 将收集到的用户操作信息转换为CDP命令发送给Chromium内核，让Chromium内核执行相应的操作

在这个过程中，我们需要做到的是在后台运行（headless模式），不用在界面上打开浏览器。尽量做到不影响用户的正常使用，也就是无感知运行，但是Headless模式也就意味着有更大的可能被反爬虫机制所判定。

幸运的是 Chrome 112 现已推出全新的Headless模式！，在新Headless的加持下，我们可以在后台运行的时候得到与正常浏览一样的体验，这就使得反爬机制的判定更加困难

在新Headless模式的加持下，再加上一点点的欺骗手段。所有 fpscanner 测试现在都是绿色的、所有 intoli 测试和 areyouheadless 测试都是绿色的

成品展示

掘金自动签到

开启定时任务，爬取新浪热搜，自动执行

截取新浪热搜每一条的元素

JSON 数据格式，每一步均可配置

非常方便的嵌入式工具箱，满足你的大部分需求

选取元素高亮显示，简单易懂

各位大佬如果有好的想法或建议，欢迎探讨！