自动化表单填充插件

Chrome 浏览器扩展插件，自动模拟点击和填充表单数据

功能特点

自动填充

智能识别表单字段，自动填充预设数据

自动提交

模拟用户点击，自动完成表单提交流程

配置灵活

支持自定义规则，适配不同表单场景

高效便捷

一键执行，大幅提升重复性工作效率

快速安装

方式一：Chrome 应用商店安装（推荐）

访问 Chrome Web Store
搜索 "自动化表单填充"
点击"添加至 Chrome"按钮
确认安装权限

方式二：手动安装开发版

# 1. 克隆项目
git clone https://github.com/yourusername/auto-form-filler.git
cd auto-form-filler
 
# 2. 安装依赖
npm install
 
# 3. 构建扩展
npm run build
 
# 4. 在 Chrome 中加载
# 打开 chrome://extensions/
# 开启"开发者模式"
# 点击"加载已解压的扩展程序"
# 选择 dist 文件夹

使用指南

1. 配置填充规则

点击扩展图标打开配置面板：

{
  "rules": [
    {
      "name": "默认配置",
      "url": "https://example.com/form",
      "fields": [
        {
          "selector": "#name",
          "value": "张三",
          "type": "input"
        },
        {
          "selector": "#email",
          "value": "zhangsan@example.com",
          "type": "input"
        },
        {
          "selector": "#gender",
          "value": "male",
          "type": "select"
        },
        {
          "selector": "#agree",
          "checked": true,
          "type": "checkbox"
        }
      ],
      "submit": {
        "selector": "#submit-btn",
        "delay": 1000
      }
    }
  ]
}

2. 启动自动填充

打开目标网页
点击扩展图标
选择对应的配置规则
点击"开始执行"按钮

3. 监控执行状态

插件会实时显示执行进度：

✅ 成功填充字段
⏳ 等待元素加载
❌ 填充失败（会显示错误原因）

高级配置

动态数据填充

支持使用变量和函数生成动态数据：

{
  "fields": [
    {
      "selector": "#timestamp",
      "value": "{{timestamp}}",  // 当前时间戳
      "type": "input"
    },
    {
      "selector": "#random-id",
      "value": "{{uuid}}",  // 随机 UUID
      "type": "input"
    },
    {
      "selector": "#date",
      "value": "{{date:YYYY-MM-DD}}",  // 格式化日期
      "type": "input"
    }
  ]
}

条件执行

根据页面状态决定是否执行：

{
  "conditions": [
    {
      "selector": "#login-status",
      "attribute": "data-logged-in",
      "value": "true"
    }
  ],
  "actions": [
    // 只在登录状态下执行的操作
  ]
}

循环和批量操作

{
  "loop": {
    "count": 10,
    "delay": 2000,  // 每次循环间隔 2 秒
    "fields": [
      {
        "selector": "#item-name",
        "value": "商品{{index}}"  // index 从 1 开始
      }
    ]
  }
}

等待和延迟

{
  "fields": [
    {
      "selector": "#address",
      "value": "北京市海淀区",
      "type": "input",
      "wait": {
        "type": "selector",  // 等待元素出现
        "value": "#address-suggestions",
        "timeout": 5000
      }
    }
  ],
  "delays": {
    "beforeFill": 500,    // 填充前等待
    "afterFill": 200,     // 填充后等待
    "beforeSubmit": 1000  // 提交前等待
  }
}

代码示例

基础表单填充

// content.js
class AutoFormFiller {
  constructor(config) {
    this.config = config;
  }
 
  async fillForm() {
    for (const field of this.config.fields) {
      await this.fillField(field);
    }
    
    if (this.config.submit) {
      await this.submitForm(this.config.submit);
    }
  }
 
  async fillField(field) {
    const element = document.querySelector(field.selector);
    
    if (!element) {
      console.error(`Element not found: ${field.selector}`);
      return;
    }
 
    switch (field.type) {
      case 'input':
      case 'textarea':
        element.value = field.value;
        element.dispatchEvent(new Event('input', { bubbles: true }));
        break;
        
      case 'select':
        element.value = field.value;
        element.dispatchEvent(new Event('change', { bubbles: true }));
        break;
        
      case 'checkbox':
      case 'radio':
        element.checked = field.checked;
        element.dispatchEvent(new Event('change', { bubbles: true }));
        break;
    }
    
    await this.delay(field.delay || 100);
  }
 
  async submitForm(submitConfig) {
    await this.delay(submitConfig.delay || 0);
    const button = document.querySelector(submitConfig.selector);
    
    if (button) {
      button.click();
    }
  }
 
  delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}
 
// 使用示例
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'fillForm') {
    const filler = new AutoFormFiller(request.config);
    filler.fillForm()
      .then(() => sendResponse({ success: true }))
      .catch(error => sendResponse({ success: false, error: error.message }));
    return true;  // 保持消息通道开启
  }
});

Popup 界面

// popup.js
document.getElementById('start-btn').addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
  // 获取当前页面的配置
  const config = await getConfigForUrl(tab.url);
  
  if (!config) {
    showError('未找到匹配的配置规则');
    return;
  }
  
  // 发送消息到 content script
  chrome.tabs.sendMessage(tab.id, {
    action: 'fillForm',
    config: config
  }, (response) => {
    if (response.success) {
      showSuccess('表单填充完成！');
    } else {
      showError('填充失败：' + response.error);
    }
  });
});

使用场景

📝 重复性表单

快速填充经常需要提交的相同或类似表单

🧪 测试自动化

在开发测试阶段快速填充测试数据

📊 数据录入

批量录入大量结构化数据到 Web 系统

⚡ 效率提升

减少手动操作，节省宝贵时间

安全说明

安全提醒

不要在配置中保存敏感信息（如密码、信用卡号）
仅从可信来源下载和安装插件
定期检查插件权限，确保不被滥用
建议使用环境变量或加密存储敏感配置

权限说明

插件需要以下权限：

activeTab - 访问当前活动标签页
storage - 保存配置数据
scripting - 注入脚本执行填充操作

我们承诺：

✅ 仅在用户主动触发时执行操作
✅ 不收集或上传任何用户数据
✅ 所有数据本地存储
✅ 开源代码，接受社区审查

项目结构

auto-form-filler/
├── manifest.json          # 扩展配置文件
├── popup/
│   ├── popup.html        # 弹出界面
│   ├── popup.js          # 界面逻辑
│   └── popup.css         # 样式
├── content/
│   └── content.js        # 内容脚本
├── background/
│   └── background.js     # 后台脚本
├── icons/                # 图标资源
└── README.md

贡献指南

欢迎贡献代码和建议！

# Fork 项目后
git clone https://github.com/yourusername/auto-form-filler.git
cd auto-form-filler
 
# 创建功能分支
git checkout -b feature/your-feature
 
# 提交更改
git commit -m "Add: your feature description"
git push origin feature/your-feature
 
# 创建 Pull Request

开始使用吧！

让重复性的表单填充工作变得简单高效

安装插件 →

查看源码