Flow Forge Recorder

Flow Forge Recorder 是一个适用于 Chrome 和 Edge 的网页流程事件录制扩展。它可以记录用户在网页中的常见操作，并将录制结果导出为格式化的 JSON 文件。

功能特性

• 录制点击和文本输入
• 录制下拉选择、复选框和单选框操作
• 录制页面跳转、SPA 路由和 URL 片段变化
• 录制标签页的新建、切换和关闭
• 支持同源 iframe 和开放式 Shadow DOM
• 自动合并短时间内的连续输入和重复点击
• 支持查看、单独删除或清空已录制事件
• 将录制结果导出为 flow.json
• 自动处理密码、文件路径等敏感内容

本项目只负责网页事件的录制、整理和导出。

环境要求

• Node.js
• npm
• Chrome 或 Edge
• element-locator 本地依赖

请将 element-locator 和本项目放在同一个父目录下：

parent-directory/
├── element-locator/
└── flow-forge/

构建

在项目目录中执行：

npm install
npm run build

构建产物位于 dist 目录。

安装扩展

1. 打开 Chrome 或 Edge 的扩展管理页面。
2. 启用“开发者模式”。
3. 点击“加载已解压的扩展”。
4. 选择本项目构建生成的 dist 目录。

修改代码并重新构建后，需要在扩展管理页面中点击“重新加载”。

使用方式

1. 点击浏览器工具栏中的扩展图标。
2. 点击 Start，并按浏览器提示授予网站访问权限。
3. 在网页中执行需要录制的操作。
4. 点击 Stop 停止录制。
5. 点击 Download 下载 flow.json。

使用 Clear 可以清空所有事件，也可以在事件列表中单独删除某条记录。

权限说明

扩展使用以下浏览器权限：

• storage：保存录制状态和事件
• tabs、windows：识别标签页和窗口变化
• webNavigation：记录页面导航
• scripting：在开始录制时注入录制脚本
• downloads：下载 JSON 文件
• activeTab：访问当前标签页
• <all_urls>：经用户授权后在网页中录制事件

网站访问权限会在用户点击 Start 时请求；拒绝授权后不会开始录制。

隐私保护

• 密码输入不会保存真实内容，导出时统一表示为 ${password}。
• 文件输入不会读取文件列表或本地路径，导出时统一表示为 ${file}。
• URL 中常见的敏感查询参数会被脱敏。
• 包含敏感内容或不安全绝对 XPath 的选择器不会被导出。
• 录制数据保存在浏览器本地，不会上传到远程服务器。

已知限制

• 无法在 chrome://、edge:// 和浏览器扩展商店等受保护页面中录制。
• 跨域 iframe 是否可以录制取决于浏览器权限和脚本注入限制。
• Closed Shadow DOM 内部元素无法被遍历。
• 没有可用元素选择器的网页事件不会被记录。

开发验证

npm test
npm run typecheck
npm run build