利用 Electron 控制页面

Photo by Zdeněk Macháček on Unsplash

Electron 本质上是对 Chromium 与 Node 环境的封装,因此利用它来对页面进行控制,做一些自动化操作也是顺理成章的事情。而其中的关键是它自带的 preload 与 IPC 机制。

preload 机制

假如我们想在 Electron 中加载远程的一个 URL 页面,并且想控制这个页面的行为,那么preload(预加载)是必不可少的一步。通过 preload,我们可以在远程页面加载之前,预先加载本地的 preload 脚本,然后由它在浏览器端做一部分页面元素的控制操作。

在创建一个浏览器窗口的时候,我们就可以指定 preload 的绝对路径,表明在浏览器窗口打开、刷新时就预先加载这个 preload.js 脚本。

在 preload.js 中我们就可以像编写 Node 代码一样编写 preload.js,Electron 会帮助我们将 Node 的 Common 模块转化为 AMD 模块。

正在 preload 中你也可以动态引入 Jquery,来更方便的对页面元素进行操作。

主进程与渲染进程

想要了解 IPC 机制,首先需要了解什么是主进程与渲染进程。在一个 Electron 应用中,有一个主进程和一个或多个渲染进程。主进程负责控制应用的生命周期,负责渲染进程的打开与创建,利用 Node API 与操作系统进行交互。渲染进程是指 Electron 中通过主进程创建出来的浏览器窗口进程。

利用渲染进程,我们可以控制页面元素并与主进程进行消息通信——也称为 IPC (Inter-Process Communication,进程间通信)。

IPC 机制

preload 本质上是在渲染进程中运行的脚本,故光靠 preload 不能完全满足页面控制的所有场景。如修改浏览器 userAgent、写入本地日志文件等功能都需要主进程去完成。为了让渲染进程和主进程互相配合,ELectron 提供了 IPC 机制,让渲染进程可以在合适的时机去通知主进程完成一些特定操作。

IPC 分为同步和异步。异步 IPC 的场景下,假如渲染进程需要得知主进程的消息回复,必须启动一个监听线程。

同步 IPC 场景下, 假如渲染进程需要得知主进程的消息回复可以这样写。

总结

利用 ELectron 的原生方法来对页面进行自动化控制相对来说比较容易。开发者只要编写好前端的 preload 脚本,并让主进程去完成浏览器的控制和与操作系统的底层交互即可。

参考链接

Electron ipc-main

Communicate between BrowserWindow and rendered URL

发表评论

电子邮件地址不会被公开。 必填项已用*标注