📊 智能表格填充助手

一个强大的Chrome浏览器扩展，专门用于动态表单的自动填充。通过监控DOM变化，智能检测新增的输入字段并提供手动确认填充功能，特别适用于需要重复添加表单行的场景。

✨ 核心功能

🔍 动态表单监控

• 实时监控页面DOM变化，自动检测新增的输入字段
• 使用MutationObserver技术，准确捕获动态生成的表单元素
• 支持各种复杂的Web应用和单页面应用(SPA)

🎯 手动确认填充

• 检测到新字段后等待用户确认，避免误填充
• 智能按钮状态：✨填充当前行 / ⏳等待新字段
• 可视化状态指示器，实时显示监控和填充状态

🏷️ 智能字段识别

• 支持多种输入类型：input, textarea, select, contenteditable
• 智能处理特殊字段：日期、数字、下拉框、复选框
• 按DOM顺序填充，确保逻辑正确

📂 多格式数据支持

• CSV格式 - 最常用的表格数据格式
• JSON格式 - 适用于结构化数据
• 直接粘贴 - 支持从剪贴板直接粘贴数据

🎨 可视化反馈

• 填充成功的绿色高亮动画
• 实时状态提示和进度显示
• 监控指示器和填充计数

🚀 快速开始

📦 安装方法

1. 下载项目

   git clone https://github.com/your-username/smart-table-filler.git
   # 或直接下载ZIP文件

2. 安装到Chrome

   • 打开Chrome浏览器，进入 chrome://extensions/
   • 开启右上角的"开发者模式"
   • 点击"加载已解压的扩展程序"
   • 选择项目文件夹
   • 扩展安装完成！

🎯 使用流程

1. 准备数据

CSV格式示例：

姓名,邮箱,电话,公司
张三,[email protected],13800138001,北京科技有限公司
李四,[email protected],13800138002,上海创新公司
王五,[email protected],13800138003,深圳创业公司

2. 开始监控

1. 打开需要填充的网页
2. 点击扩展图标打开弹窗
3. 粘贴或上传CSV数据
4. 点击"🚀 开始监控"

3. 动态填充

1. 在目标网页上点击"添加行"或"新增"按钮
2. 扩展自动检测新增的输入字段
3. 弹窗显示"🔍 检测到新字段，等待用户确认填充"
4. 点击"✨ 填充当前行"确认填充
5. 重复步骤1-4直到所有数据填充完毕

🔧 技术特点

💡 智能检测算法

// 支持的字段选择器
const selectors = [
    'input:not([type="hidden"]):not([type="submit"]):not([type="button"])',
    'textarea',
    'select',
    '[contenteditable="true"]',
    '[role="textbox"]',
    '[role="combobox"]'
];

🎨 类型智能处理

• 日期字段 - 自动转换为 YYYY-MM-DD 格式
• 数字字段 - 自动验证和类型转换
• 下拉框 - 智能匹配选项值或文本
• 复选框 - 布尔值自动转换
• 富文本 - 支持 contenteditable 元素

🔄 DOM监控机制

// 监控DOM变化
this.mutationObserver = new MutationObserver((mutations) => {
    // 检测新增的输入字段
    // 触发填充确认流程
});

📋 支持的字段类型

字段类型	支持状态	说明
input[type="text"]	✅	文本输入框
input[type="email"]	✅	邮箱输入框
input[type="tel"]	✅	电话输入框
input[type="number"]	✅	数字输入框，自动类型转换
input[type="date"]	✅	日期输入框，自动格式化
input[type="url"]	✅	URL输入框
input[type="search"]	✅	搜索框
input[type="password"]	✅	密码输入框
textarea	✅	多行文本区域
select	✅	下拉选择框，支持值和文本匹配
input[type="checkbox"]	✅	复选框，布尔值转换
input[type="radio"]	✅	单选框，按值匹配
[contenteditable]	✅	可编辑元素
[role="textbox"]	✅	ARIA文本框
[role="combobox"]	✅	ARIA组合框

🎯 使用场景

👥 员工信息录入

• 批量录入员工基本信息
• 动态添加员工记录
• 自动填充姓名、邮箱、电话等

📝 用户注册批量处理

• 批量创建测试用户
• 自动填充注册表单
• 支持动态用户列表

🧪 测试数据生成

• 为Web应用生成测试数据
• 快速填充表单进行功能测试
• 支持各种输入类型测试

📊 数据迁移

• 从Excel/CSV导入数据到Web系统
• 批量数据录入和迁移
• 减少手动录入工作量

🛡️ 安全与隐私

• ✅ 本地处理 - 所有数据处理都在本地进行
• ✅ 无数据上传 - 不会将数据发送到任何服务器
• ✅ 最小权限 - 只请求必要的浏览器权限
• ✅ 用户控制 - 需要用户主动确认每次填充操作

🔄 工作流程图

📥 上传数据 → 🚀 开始监控 → 👆 手动添加行 → 🔍 检测新字段 → ✨ 确认填充 → 🎉 完成
     ↓              ↓              ↓              ↓              ↓
  解析CSV/JSON   启动DOM监控   触发DOM变化   显示填充按钮   执行数据填充

🛠️ 开发说明

📁 项目结构

chrome-extension/
├── manifest.json           # 扩展配置文件
├── popup.html             # 弹窗界面
├── popup.js               # 弹窗逻辑
├── popup.css              # 弹窗样式
├── content.js             # 内容脚本（核心功能）
├── content.css            # 内容样式
├── background.js          # 后台服务
├── test-dynamic-form.html # 测试页面
└── icons/                 # 图标文件

🔧 核心类

class DynamicFormMonitor {
    // 动态表单监控器
    startMonitoring()     // 开始监控
    stopMonitoring()      // 停止监控
    fillCurrentRow()      // 填充当前行
    rollback()           // 回滚数据
}

❓ 常见问题

Q: 为什么需要手动确认填充？

A: 为了避免误填充，确保用户对每次填充操作都有完全的控制权。

Q: 支持哪些网站？

A: 支持所有使用标准HTML表单的网站，包括React、Vue、Angular等现代Web应用。

Q: 数据安全吗？

A: 是的，所有数据处理都在本地进行，不会上传到任何服务器。

Q: 如何处理复杂的表单？

A: 扩展使用智能字段检测算法，支持各种复杂的输入类型和动态生成的表单。

🔄 更新日志

v1.0.0 (2024-01-15)

• 🎉 首次发布
• 🔍 动态表单监控 - 实时检测新增字段
• 🎯 手动确认填充 - 安全可控的填充模式
• 🏷️ 智能字段识别 - 支持多种输入类型
• 📂 多格式支持 - CSV、JSON、直接粘贴
• 🎨 可视化反馈 - 状态指示和填充动画

🤝 贡献指南

欢迎贡献代码！请遵循以下步骤：

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

📄 许可证

MIT License - 详见 LICENSE 文件

🌟 支持项目

如果这个项目对您有帮助，请给我们一个⭐星标！

---

🔗 相关链接

• 使用指南
• 功能说明
• 测试步骤
• 问题反馈

---

最后更新：2024-01-15