前端不止 CRUD，还能当 Spider Man

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

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

获取Spider Man

下载地址： https://github.com/qianqianhaiou/JunkPuppet/releases

项目仓库：https://github.com/qianqianhaiou/JunkPuppet

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

三个工具

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

Electron

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

Puppeteer

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

ChromeExtension

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

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

SpiderMan 概念

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

1. 管理者（Electron），负责统筹调度
2. 收集者（content_scripts），负责收集必要信息
3. 执行者（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 数据格式，每一步均可配置

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

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

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