AutoFillIn:智能浏览器表单与文件上传自动化 - Openclaw Skills

作者:互联网

2026-04-16

AI教程

什么是 AutoFillIn?

AutoFillIn 是一款精密复杂的自动化工具,旨在简化繁琐的网页数据录入和文件管理任务。通过利用 Playwright 浏览器自动化技术,它能够智能识别表单字段,将提供的数据映射到正确的输入框,并处理复杂的多文件或文件夹上传。作为 Openclaw Skills 集合中功能丰富的成员,它兼顾效率与安全,提供持久化会话管理以绕过重复登录,同时在数据正式提交前设有手动确认环节。

该技能对于频繁与需要 OAuth 或多重身份验证的平台互动的开发人员和高级用户特别有效。通过保存浏览器状态,AutoFillIn 确保自动化工作流在不同会话中保持连续,使其成为满足现代网页自动化需求的可靠解决方案。

下载入口:https://github.com/openclaw/skills/tree/main/skills/leohan123123/autofillin

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

npx clawhub@latest install autofillin

2. 手动安装

将技能文件夹复制到以下位置之一

全局模式 ~/.openclaw/skills/ 工作区 /skills/

优先级:工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

请帮我使用 Clawhub 安装 autofillin。如果尚未安装 Clawhub,请先安装(npm i -g clawhub)。

AutoFillIn 应用场景

  • 在复杂的企业网页表单或管理门户中自动化重复的数据录入。
  • 将开发版本、资源或文档上传到 MoltHub 等平台,并进行精确的元数据映射。
  • 处理多文件文档提交,其中特定文件必须映射到不同的上传位置。
  • 通过保存的浏览器存储会话,简化与受 Google 或 GitHub OAuth 保护的网站的交互。
AutoFillIn 工作原理
  1. 浏览器初始化:技能检查 ~/.playwright-auth.json 中是否存在现有会话,或启动保存会话的登录流程。
  2. 导航与检测:启动 Playwright Chromium,导航至目标 URL,并使用可访问性快照分析页面结构。
  3. 字段映射:代理将用户提供的数据键映射到相应的 HTML 表单标签和输入类型。
  4. 执行:使用专用 MCP 工具自动填充文本字段、选择下拉选项并附加文件或文件夹。
  5. 审核与提交:流程会暂停以供用户手动审核已填充的表单,确保在点击最终提交前的准确性。

AutoFillIn 配置指南

要开始使用此技能,请安装必要的依赖项并捕获您的初始会话:

# 安装 Playwright 和 Chromium 浏览器
npx playwright install chromium

# 执行首次登录以保存会话供将来使用
npx playwright open --save-storage=~/.playwright-auth.json "https://your-target-site.com"

确保您的 MCP 配置包含 @anthropic-ai/mcp-server-playwright 和 @modelcontextprotocol/server-filesystem,以启用完整的自动化功能。

AutoFillIn 数据架构与分类体系

该技能通过以下文件和元数据结构组织其操作:

数据组件 格式 用途
SKILL.md Markdown 包含代理的主要配置和触发器定义。
~/.playwright-auth.json JSON 存储持久化会话数据,包括 Cookie 和 localStorage。
scripts/ 目录 包含用于环境设置和 Chrome 调试编排的 Shell 脚本。
MCP 工具集 API 利用 take_snapshot、fill_form 和 upload_file 等工具进行页面交互。
name: autofillin
description: Automated web form filling and file uploading skill with Playwright browser automation. Handles login persistence, form detection, file uploads, and waits for manual confirmation before submission.
version: 1.2.0
trigger: autofillin
author: leohan123123
tags: automation, form, upload, browser, playwright, mcp

AutoFillIn - Browser Form Automation Skill

Trigger Command: autofillin

An intelligent automation skill that fills web forms, uploads files/folders to correct positions, and handles complex multi-field submissions with persistent login support.

What's New in v1.2.0

  • Enhanced Error Handling: Graceful error recovery with detailed messages
  • Consolidated Configuration: Merged mcp-config into SKILL.md
  • Improved Robustness: Better port conflict handling and process management
  • Cross-platform Fixes: Improved Windows/Linux compatibility

Changelog

Version Changes
v1.2.0 Enhanced error handling, consolidated config, improved robustness
v1.1.0 Added Playwright support, session persistence, folder upload
v1.0.0 Initial release with Chrome debug mode

Features

  • Navigate to any web form URL
  • Auto-fill text fields, textareas, dropdowns
  • Upload files/folders to correct form positions
  • Persistent login via saved browser storage
  • Wait for manual confirmation before submission
  • Support for multi-file uploads with position mapping
  • Graceful error recovery

Quick Setup

# 1. Install Playwright browsers
npx playwright install chromium

# 2. First-time login (saves session for reuse)
npx playwright open --save-storage=~/.playwright-auth.json "https://your-target-site.com"
# Login manually in the browser that opens, then close it

# 3. Future runs will auto-login using saved session
npx playwright open --load-storage=~/.playwright-auth.json "https://your-target-site.com"

MCP Configuration

Add to your MCP settings (Claude Code, OpenCode, etc.):

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

Environment variables for shell integration:

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

Browser Automation Options

# First login - saves session
npx playwright open --save-storage=~/.playwright-auth.json "https://molthub.com/upload"

# Subsequent uses - loads saved session
npx playwright open --load-storage=~/.playwright-auth.json "https://molthub.com/upload"

Advantages:

  • No "unsafe browser" blocks from Google/GitHub OAuth
  • Session persistence across runs
  • Works with MCP browser tools

Option 2: Chrome Debug Mode (For non-OAuth sites)

# Start Chrome with debug port
./scripts/start-chrome.sh "https://example.com/form"

# With your default Chrome profile (keeps existing logins)
./scripts/start-chrome.sh --use-default-profile "https://example.com/form"

Note: Chrome debug mode with custom --user-data-dir is blocked by Google OAuth. Use Playwright for sites requiring Google/GitHub login.

Usage Examples

Basic Form Filling

autofillin https://example.com/form
- Fill "Name" field with "John Doe"
- Fill "Email" field with "john@example.com"
- Upload resume.pdf to file input

MoltHub Skill Upload

autofillin https://molthub.com/upload

Form Data:
- Slug: autofillin
- Display name: AutoFillIn - Browser Form Automation Skill
- Version: 1.2.0
- Tags: automation, browser, form, playwright, mcp
- Changelog: v1.2.0 - Enhanced error handling, consolidated config

Upload:
- Folder: ~/clawd/skills/autofillin/

[WAIT FOR MANUAL CONFIRMATION TO PUBLISH]

Multi-file Upload with Position Mapping

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

Files to upload:
- Position 1 (ID Document): ~/documents/id_card.pdf
- Position 2 (Proof of Address): ~/documents/utility_bill.pdf
- Position 3 (Photo): ~/photos/headshot.jpg

[WAIT FOR MANUAL CONFIRMATION]

Workflow

1. BROWSER SETUP
   - Check for saved session (~/.playwright-auth.json)
   - Launch Playwright Chromium with session
   - Or prompt for one-time login if no session exists

2. NAVIGATION & LOGIN
   - Navigate to target URL
   - Detect if login is required
   - If login needed: Fill username, prompt for password, save session

3. PAGE ANALYSIS
   - Take accessibility snapshot
   - Identify all form fields
   - Map field labels to input elements

4. AUTO-FILL PHASE
   - Fill text fields using fill() or fill_form()
   - Select dropdown options
   - Upload files/folders via upload_file()

5. CONFIRMATION PHASE
   - Display summary of filled data
   - WAIT FOR MANUAL CONFIRMATION
   - User reviews and clicks Submit/Publish

MCP Tools Used

Tool Purpose
take_snapshot Get page accessibility tree
fill Fill single form field
fill_form Fill multiple fields at once
upload_file Upload file or folder
browser_click Click buttons
evaluate_script Run JavaScript
navigate_page Navigate to URLs

Credential Management

# Use macOS Keychain
security add-generic-password -a "github" -s "autofillin" -w "your-password"
security find-generic-password -a "github" -s "autofillin" -w

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

# Use Windows Credential Manager
cmdkey /add:autofillin-github /user:github /pass:your-password

Session Persistence

Sessions saved to ~/.playwright-auth.json include cookies, localStorage, and sessionStorage.

Error Handling

Error Cause Solution
Unsafe browser Google OAuth blocked Use Playwright instead of Chrome debug
Login required Session expired Run with --save-storage
Element not found Page changed Take new snapshot
Upload failed Wrong file type Check webkitdirectory
Port in use Another Chrome instance Script auto-kills conflicting process
Chrome not found Not installed Run setup-env.sh

Troubleshooting

Chrome won't start with debug mode

# Check if port is in use
lsof -i:9222

# Kill existing processes
pkill -f "remote-debugging-port=9222"

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

Session not persisting

# Verify auth file exists
ls -la ~/.playwright-auth.json

# Re-authenticate
npx playwright open --save-storage=~/.playwright-auth.json "https://target-site.com"

File upload not working

  • Ensure file path is absolute
  • Check file permissions: ls -la /path/to/file
  • For folder uploads, verify the input has webkitdirectory attribute

Files in This Skill

autofillin/
├── SKILL.md              # This documentation (includes MCP config)
└── scripts/
    ├── setup-env.sh      # Environment setup (cross-platform)
    ├── start-chrome.sh   # Chrome debug launcher
    └── autofillin.sh     # Main orchestrator with error handling

Author

  • GitHub: @leohan123123

License

MIT

相关推荐