# recordrweb-form-capture

**Repository Path**: zxj6/recordrweb-form-capture

## Basic Information

- **Project Name**: recordrweb-form-capture
- **Description**: 基于 vite-plugin-monkey 和 rrweb 开发的表单数据抓取和自动回填插件。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-12-30
- **Last Updated**: 2026-01-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# RecordrWeb - 表单抓取和回填插件

基于 vite-plugin-monkey 和 rrweb 开发的表单数据抓取和自动回填插件。

## 功能特性

### 表单数据抓取
- ✅ 实时捕获所有表单元素的变化（input、textarea、select）
- ✅ 支持文本、密码、邮箱、URL等输入类型
- ✅ 支持复选框和单选按钮状态捕获
- ✅ 支持下拉选择框选项捕获
- ✅ 自动记录表单提交事件
- ✅ 使用rrweb录制用户操作过程

### 表单数据回填
- ✅ 自动识别和匹配表单元素
- ✅ 支持多种元素定位方式（ID、name、XPath）
- ✅ 智能表单数据填充
- ✅ 支持rrweb操作回放
- ✅ 跨页面数据持久化存储

### 用户界面
- ✅ 浮动控制面板
- ✅ 实时状态提示
- ✅ 操作通知提醒
- ✅ 可视化操作回放

## 安装和使用

### 环境要求
- Node.js 16+
- 现代浏览器（支持ES6+）
- 油猴插件（Tampermonkey/Greasemonkey）

### 安装步骤

1. 安装依赖
```bash
npm install
```

2. 开发模式运行
```bash
npm run dev
```

3. 构建生产版本
```bash
npm run build
```

4. 在油猴插件中安装生成的用户脚本

### 使用方法

1. 访问包含表单的网页
2. 点击右上角的控制面板
3. 点击"开始录制"按钮
4. 填写表单数据
5. 点击"停止录制"按钮
6. 刷新页面或访问其他页面
7. 点击"回填表单"按钮自动填充

## 项目结构

```
recordrweb-form-capture/
├── src/
│   ├── main.js          # 主入口文件，插件初始化
│   ├── form-capture.js   # 表单数据抓取功能
│   └── form-fill.js     # 表单数据回填功能
├── index.html           # 测试页面
├── package.json         # 项目配置和依赖
├── vite.config.js       # Vite构建配置
└── README.md           # 项目说明文档
```

## 技术架构

### 核心技术
- **vite-plugin-monkey**: 油猴脚本开发插件
- **rrweb**: 网页录制和回放库
- **GM API**: 油猴脚本存储API

### 数据流
1. **录制阶段**: 监听表单事件 → 提取数据 → 存储到GM存储
2. **回放阶段**: 读取存储数据 → 匹配元素 → 填充数据 → 播放操作

### 元素定位策略
1. 优先使用元素ID定位
2. 其次使用name属性定位
3. 使用XPath作为备用定位方式
4. 使用CSS选择器兜底

## API参考

### FormCapture类

#### 方法
- `startCapture()`: 开始捕获表单数据
- `stopCapture()`: 停止捕获并保存数据
- `getFormData()`: 获取捕获的表单数据
- `clearFormData()`: 清空捕获的数据

### FormFill类

#### 方法
- `fillForms()`: 回填表单数据
- `getCapturedData()`: 获取存储的表单数据
- `clearFormData()`: 清空回填数据

## 配置说明

### vite.config.js 配置
```javascript
export default defineConfig({
  plugins: [
    monkey({
      entry: 'src/main.js',
      userscript: {
        name: 'Form Capture & Fill',
        match: ['*://*/*'],
        grant: ['GM_xmlhttpRequest', 'GM_setValue', 'GM_getValue', 'GM_notification']
      }
    })
  ]
});
```

### 支持的GM API
- `GM_setValue`: 数据存储
- `GM_getValue`: 数据读取
- `GM_notification`: 通知提示
- `GM_xmlhttpRequest`: 网络请求

## 开发指南

### 添加新的表单类型支持

1. 在 `form-capture.js` 的 `extractFormData` 方法中添加对新类型的处理
2. 在 `form-fill.js` 的 `fillElement` 方法中添加填充逻辑
3. 更新测试页面添加相应的表单元素

### 自定义存储策略

默认使用GM存储API，可以修改为：
- LocalStorage
- IndexedDB
- 服务器API

## 测试

项目包含完整的测试页面，包含：
- 文本输入框
- 密码框
- 邮箱输入框
- 复选框和单选按钮
- 下拉选择框
- 文本区域
- 表单提交

访问 `index.html` 即可进行功能测试。

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 许可证

MIT License

## 作者

zhangxingju

## 更新日志

### v1.0.0 (2024-12-30)
- ✅ 初始版本发布
- ✅ 基础表单抓取功能
- ✅ 表单数据回填功能
- ✅ rrweb操作录制和回放
- ✅ 油猴插件集成
- ✅ 测试页面和文档

## 任务状态

### 已完成任务
- [x] 分析项目结构和现有依赖
- [x] 研究rrweb录制和回放机制
- [x] 创建表单数据抓取功能
- [x] 实现表单数据回填功能
- [x] 集成vite-plugin-monkey配置
- [x] 编写README文档

### 待完成任务
- [ ] 测试插件功能
- [ ] 优化性能和处理边界情况
- [ ] 添加更多测试用例
- [ ] 完善错误处理和用户提示