项目概述
近期完成了一项网页自动化控制项目。该项目实现了一个可远程访问的界面，支持用户管理网页自动化程序，并在远程计算机的特定网页上模拟人类执行各种操作。
项目亮点
- 高隐蔽性：项目通过 Electron 的 Webview 真正渲染网页，而不是使用无头浏览器，并且模拟键盘、鼠标执行各项操作，避免直接用 JavaScript 操作页面，从而进一步降低了被侦测到自动化行为的可能性。
- 可集群化部署：通过 Express 提供控制面板页面，既可以在 Electron 应用程序界面直接使用，也可以通过浏览器访问，便于远程控制自动化执行程序。任务引擎使用 WebSocket 与前端通信，接收用户的操作指令（如添加、删除、编辑任务）并反馈任务执行的状态。这种设计便于远程部署和集群化部署，通过扩展开发可以支持批量部署、批量操作和批量调度。
- UI 易用性：前端界面设计采用 React 和 Primer 组件库，简洁直观，用户可以轻松地创建和管理任务。React 的状态管理使得界面更新更加高效和便捷，易于开发者后续更改业务逻辑和前端布局。
- 跨平台支持：通过 Electron 创建桌面应用，使得控制面板可以在不同操作系统上运行。
创新点
采用 Electron 代码实现模拟键鼠操作
传统上，Electron 用于以 Web 渲染方式形成界面。本项目反其道而行之，将其渲染的页面作为业务逻辑运行的“载体”，即用 Electron 渲染执行自动化的目标网页，并通过 Electron 的 API 模拟人类的键盘和鼠标操作。这种方式不仅能提供更高的隐蔽性，还能更接近真实用户的操作行为，避免被目标网页检测到自动化操作。
以 React-Express-Websocket 提供自动化程序的远程控制面板
为了便于远程操作和部署，创新性地将控制面板与 Electron 本身分离开来。控制面板通过 React 和 Express 实现，用户可以通过浏览器访问控制面板的端口来管理自动化任务。这种设计允许 Electron 在远程环境中自动运行，需要操作时只需通过浏览器访问控制面板即可。这种分离的架构不仅提高了系统的灵活性，还便于后续的扩展和维护。更进一步地，基于 Express 和 Websocket 的网络化设计为将来集群化部署提供了可能。
思考
Electron 经常被诟病臃肿，这是由于其自带完整 Chromium 内核的缘故。我想议论的是，Electron 必要的体积占用也是合理的。
利用 Web 技术开发桌面 UI 的优势无需赘言，利用各种成熟的库、框架、工具，可以在显著减少开发成本的同时轻松形成美观的界面。内置 Chromium 可以保证跨平台一致性，开发者可以保证其开发的 Web 界面在所有设备上都能有几乎一样的表现。如果利用用户自有的浏览器或 webview 组件，很难统一界面。
此外，解包后 100-200MB 大小的应用程序对现今绝大多数计算机平台而言压力并不大。许多广受欢迎的应用如 Discord、Slack、Microsoft Teams 和 VSCode 都是基于 Electron 开发的。可见，用户对这些应用的评价往往是基于其功能和易用性，而不是其底层技术。
综合而言，Electron 带来的开发便利性、跨平台一致性和强大的功能支持，使得其在许多场景下仍然是一个合理且高效的选择。
Gallery
