名称： autofillin
描述： 使用 Playwright 浏览器自动化实现网页表单自动填充与文件上传的技能。支持登录状态持久化、表单检测、文件上传，并在提交前等待手动确认。
版本： 1.2.0
trigger: autofillin
作者： leohan123123
标签： automation, form, upload, browser, playwright, mcp

AutoFillIn - 浏览器表单自动化技能

触发命令: autofillin

一个智能自动化技能，用于填充网页表单、将文件/文件夹上传到正确位置，并处理包含多字段的复杂提交，同时支持持久化登录。

v1.2.0 更新内容

• 增强的错误处理：提供详细的错误信息并实现优雅恢复
• 配置整合：将 MCP 配置合并到 SKILL.md 中
• 提升稳健性：改进了端口冲突处理和进程管理
• 跨平台修复：增强了 Windows/Linux 兼容性

更新日志

功能特性

• 导航至任意网页表单 URL
• 自动填充文本框、文本域、下拉菜单
• 将文件/文件夹上传到表单的正确位置
• 通过保存的浏览器存储实现持久化登录
• 提交前等待手动确认
• 支持带位置映射的多文件上传
• 优雅的错误恢复机制

快速设置

# 1. 安装 Playwright 浏览器
npx playwright install chromium

# 2. 首次登录（保存会话供后续使用）
npx playwright open --save-storage=~/.playwright-auth.json "https://your-target-site.com"
# 在打开的浏览器中手动登录，然后关闭浏览器

# 3. 后续运行将使用保存的会话自动登录
npx playwright open --load-storage=~/.playwright-auth.json "https://your-target-site.com"

MCP 配置

添加到您的 MCP 设置中（Claude Code、OpenCode 等）：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@anthropic-ai/mcp-server-playwright"]
    },
    "filesystem": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/"]
    }
  }
}

用于 Shell 集成的环境变量：

export CHROME_DEBUG_PORT=9222
export CHROME_USER_DATA_DIR="$HOME/.chrome-autofillin"

浏览器自动化选项

选项 1：Playwright CLI（推荐用于 OAuth 站点）

# 首次登录 - 保存会话
npx playwright open --save-storage=~/.playwright-auth.json "https://molthub.com/upload"

# 后续使用 - 加载已保存的会话
npx playwright open --load-storage=~/.playwright-auth.json "https://molthub.com/upload"

优势：
- 避免 Google/GitHub OAuth 的“不安全浏览器”拦截
- 会话在多次运行间持久化
- 与 MCP 浏览器工具兼容

选项 2：Chrome 调试模式（用于非 OAuth 站点）

# 启动 Chrome 并开启调试端口
./scripts/start-chrome.sh "https://example.com/form"

# 使用默认 Chrome 配置文件（保留现有登录状态）
./scripts/start-chrome.sh --use-default-profile "https://example.com/form"

注意：使用自定义 --user-data-dir 的 Chrome 调试模式会被 Google OAuth 拦截。对于需要 Google/GitHub 登录的站点，请使用 Playwright。

使用示例

基础表单填充

autofillin https://example.com/form
- 将“姓名”字段填充为“张三”
- 将“邮箱”字段填充为“zhangsan@example.com”
- 将 resume.pdf 上传至文件输入框

MoltHub 技能上传

autofillin https://molthub.com/upload

表单数据：
- Slug: autofillin
- 显示名称: AutoFillIn - 浏览器表单自动化技能
- 版本: 1.2.0
- 标签: automation, browser, form, playwright, mcp
- 更新日志: v1.2.0 - 增强错误处理，整合配置

上传：
- 文件夹: ~/clawd/skills/autofillin/

[等待手动确认后发布]

带位置映射的多文件上传

autofillin https://example.com/document-upload

待上传文件：
- 位置 1 (身份证明): ~/documents/id_card.pdf
- 位置 2 (地址证明): ~/documents/utility_bill.pdf
- 位置 3 (照片): ~/photos/headshot.jpg

[等待手动确认]

工作流程

1. 浏览器设置
   - 检查是否存在已保存的会话 (~/.playwright-auth.json)
   - 使用会话启动 Playwright Chromium
   - 若无会话，则提示进行一次性登录

2. 导航与登录
   - 导航至目标 URL
   - 检测是否需要登录
   - 如需登录：填充用户名，提示输入密码，保存会话

3. 页面分析
   - 获取页面可访问性快照
   - 识别所有表单字段
   - 将字段标签映射到输入元素

4. 自动填充阶段
   - 使用 fill() 或 fill_form() 填充文本字段
   - 选择下拉菜单选项
   - 通过 upload_file() 上传文件/文件夹

5. 确认阶段
   - 显示已填充数据的摘要
   - 等待手动确认
   - 用户审核并点击提交/发布按钮

使用的 MCP 工具

凭据管理

安全存储（推荐）

# 使用 macOS 钥匙串
security add-generic-password -a "github" -s "autofillin" -w "your-password"
security find-generic-password -a "github" -s "autofillin" -w

# 使用 Linux secret-tool
secret-tool store --label="autofillin-github" service autofillin username github

# 使用 Windows 凭据管理器
cmdkey /add:autofillin-github /user:github /pass:your-password

会话持久化

会话保存至 ~/.playwright-auth.json，包含 cookies、localStorage 和 sessionStorage。

错误处理

故障排除

Chrome 无法以调试模式启动

# 检查端口是否被占用
lsof -i:9222

# 终止现有进程
pkill -f "remote-debugging-port=9222"

# 重试
./scripts/start-chrome.sh "https://example.com"

会话未持久化

# 验证认证文件是否存在
ls -la ~/.playwright-auth.json

# 重新认证
npx playwright open --save-storage=~/.playwright-auth.json "https://target-site.com"

文件上传失败

• 确保文件路径是绝对路径
• 检查文件权限：ls -la /path/to/file
• 对于文件夹上传，请确认输入框具有 webkitdirectory 属性

本技能包含的文件

autofillin/
├── SKILL.md              # 本文档（包含 MCP 配置）
└── scripts/
    ├── setup-env.sh      # 环境设置脚本（跨平台）
    ├── start-chrome.sh   # Chrome 调试启动器
    └── autofillin.sh     # 主协调器（含错误处理）

作者

• GitHub: @leohan123123

许可证

MIT