🚀 WebFormAutoFiller

一个功能强大的 Chrome 扩展，用于自动填充网页表单。支持配置化表单字段映射、表单数据保存、配置导入导出等功能。

✨ 功能特性

🎯 核心功能

• 自动表单填充 - 一键填充网页表单，支持所有常见的表单元素
• 配置化管理 - 通过 JSON 配置文件定义表单字段映射关系
• 数据持久化 - 使用 Chrome Storage 存储配置和表单数据，无需手动管理文件
• 配置解析工具 - 内置工具可从 MHTML 文件自动解析表单字段并生成配置

📋 配置管理

• ✅ 导入配置 - 支持导入 JSON 格式的配置文件
• ✅ 导出配置 - 导出当前配置为 JSON 文件
• ✅ 删除配置 - 一键删除不需要的配置
• ✅ 自动更新索引 - 配置索引自动更新，无需手动维护

💾 表单数据管理

• ✅ 保存表单数据 - 保存当前填写的表单数据，方便下次快速填充
• ✅ 导入表单数据 - 从 JSON 文件导入之前保存的表单数据
• ✅ 导出表单数据 - 导出表单数据为 JSON 文件，便于备份和分享
• ✅ 删除表单数据 - 删除不需要的表单数据

🔧 配置解析工具

• ✅ MHTML 解析 - 从 MHTML 文件自动解析表单字段
• ✅ 可视化预览 - 实时预览解析的页面内容
• ✅ 元素选择 - 通过点击预览页面选择需要填充的表单元素
• ✅ XPath 生成 - 自动生成精确的 XPath 定位路径
• ✅ 配置生成 - 自动生成完整的 JSON 配置文件

📦 安装方法

从源码安装

1. 克隆仓库

   git clone https://github.com/your-username/WebFormAutoFiller.git
   cd WebFormAutoFiller

2. 加载扩展

   • 打开 Chrome 浏览器
   • 访问 chrome://extensions/
   • 开启右上角的"开发者模式"
   • 点击"加载已解压的扩展程序"
   • 选择项目文件夹

3. 开始使用

   • 扩展安装完成后，点击浏览器工具栏中的扩展图标
   • 首次使用会自动加载默认配置

🎮 使用指南

基本使用流程

1. 选择配置类型

   • 打开扩展弹出窗口
   • 从下拉菜单中选择要使用的配置类型
   • 查看配置描述了解该配置的用途

2. 填写表单数据

   • 在表单字段中输入要填充的数据
   • 支持文本、数字等常见输入类型

3. 保存表单数据（可选）

   • 点击"💾 保存"按钮
   • 输入配置名称
   • 数据将保存到 Chrome Storage

4. 填充表单

   • 打开要填充的网页
   • 点击扩展图标
   • 选择已保存的表单数据（或直接填写）
   • 点击"开始填充"按钮
   • 表单将自动填充完成

配置管理

导入配置

1. 点击配置类型区域的"📥 导入配置"按钮
2. 选择 JSON 格式的配置文件
3. 配置将自动保存并立即可用

导出配置

1. 选择要导出的配置类型
2. 点击"📤 导出配置"按钮
3. 配置文件将自动下载

删除配置

1. 选择要删除的配置类型
2. 点击"🗑️ 删除配置"按钮
3. 确认删除操作

配置解析工具

从 MHTML 文件生成配置

1. 打开配置解析工具

   • 在扩展弹出窗口中点击"🔧 配置解析工具"链接

2. 上传 MHTML 文件

   • 点击"选择 MHTML 文件"按钮
   • 选择要解析的 MHTML 文件

3. 解析页面

   • 点击"解析页面"按钮
   • 等待解析完成

4. 选择表单元素

   • 点击"开始选择元素"按钮进入选择模式
   • 在预览页面中点击要填充的表单元素
   • 元素将自动添加到"检测到的表单字段"列表

5. 编辑字段信息

   • 在字段列表中编辑字段名称（中文）
   • 选择要包含在配置中的字段（复选框）

6. 生成配置

   • 填写配置名称和描述
   • 点击"生成 JSON 配置"按钮
   • 查看生成的配置内容

7. 下载配置

   • 点击"下载配置"按钮
   • 配置文件将自动下载
   • 同时会下载更新后的配置索引文件

📁 项目结构

WebFormAutoFiller/
├── manifest.json          # Chrome 扩展清单文件
├── popup.html             # 扩展弹出窗口页面
├── popup.js               # 弹出窗口逻辑
├── config-parser.html     # 配置解析工具页面
├── config-parser.js       # 配置解析工具逻辑
├── background.js          # 后台服务脚本
├── styles.css             # 样式文件
├── configs/               # 初始配置文件（自动迁移到 Storage）
│   ├── process-steps.json
│   └── legal-info.json
└── icon*.png             # 扩展图标

⚙️ 配置文件格式

配置文件结构

{
  "id": "config-id",
  "name": "配置名称",
  "description": "配置描述",
  "mappings": {
    "FIELD_KEY": "字段中文名称",
    "SJR": "收件办理人",
    "SLR": "受理办理人"
  },
  "fieldMappings": {
    "字段中文名称": "/html/body/.../input",
    "收件办理人": "/html/body/div[1]/form/input[1]"
  }
}

字段说明

• id: 配置的唯一标识符
• name: 配置的显示名称
• description: 配置的详细描述
• mappings: 字段键到中文名称的映射（用于表单显示）
• fieldMappings: 中文名称到 XPath 的映射（用于定位表单元素）

🔧 开发说明

技术栈

• Manifest V3 - Chrome 扩展最新标准
• Chrome Storage API - 数据持久化
• Chrome Scripting API - 脚本注入
• 原生 JavaScript - 无外部依赖

数据存储

• 所有配置和表单数据存储在 chrome.storage.local 中
• 首次安装时会自动从 configs/ 文件夹迁移配置文件
• 支持导入/导出 JSON 格式的配置文件

扩展权限

• activeTab - 访问当前活动标签页
• scripting - 注入脚本到页面
• storage - 存储配置和数据

📝 更新日志

v1.1

• ✨ 支持配置导入/导出/删除
• ✨ 支持表单数据保存/导入/导出
• ✨ 内置配置解析工具
• ✨ 从 MHTML 文件自动解析表单字段
• ✨ 使用 Chrome Storage 存储所有数据
• 🗑️ 移除 CSV/Excel 支持
• 🗑️ 移除文件系统依赖

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🙏 致谢

感谢所有使用和贡献此项目的开发者！

---

⭐ 如果这个项目对你有帮助，请给个 Star！