Back to Details

chrome-form-filler

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Chrome Form Filler

Chrome表单填充工具

Quick Start

快速开始

Fill a web form safely with user approval:
User: "Fill out this registration form with my information"

Claude:
1. Gets tab context and reads form fields
2. Presents fields to user for approval
3. Fills each field incrementally
4. Verifies values after filling
5. Requests submission approval
6. Submits form only after confirmation
Critical Safety Rule: NEVER fill sensitive data (passwords, credit cards, SSNs, banking info) - always instruct user to fill these themselves.
在用户批准下安全填充网页表单：
User: "Fill out this registration form with my information"

Claude:
1. Gets tab context and reads form fields
2. Presents fields to user for approval
3. Fills each field incrementally
4. Verifies values after filling
5. Requests submission approval
6. Submits form only after confirmation
核心安全规则： 绝不要填充敏感数据（密码、信用卡、社保号、银行信息）——始终指导用户自行填写这些内容。

Table of Contents

目录

  1. When to Use This Skill
  2. What This Skill Does
  3. Safety-First Workflow
  4. Field Filling Process
  5. Verification and Submission
  6. Supporting Files
  7. Expected Outcomes
  8. Requirements
  9. Red Flags to Avoid
  1. 何时使用本技能
  2. 本技能的功能
  3. 安全优先的工作流
  4. 字段填充流程
  5. 验证与提交
  6. 支持文件
  7. 预期结果
  8. 要求
  9. 需要避免的警示信号

When to Use This Skill

何时使用本技能

Explicit Triggers

明确触发词

  • "Fill this form"
  • "Complete the form for me"
  • "Fill out registration"
  • "Submit this application"
  • "Auto-fill the contact form"
  • "Help me fill this survey"
  • "填写此表单"
  • "帮我完成表单"
  • "填写注册信息"
  • "提交此申请"
  • "自动填充联系表单"
  • "帮我填写这份调查问卷"

Implicit Triggers

隐含触发场景

  • User provides data and mentions form completion
  • User expresses frustration with long forms
  • Context shows user on form page with multiple fields
  • 用户提供数据并提及表单完成
  • 用户表达对长表单的不满
  • 上下文显示用户处于带有多个字段的表单页面

Debugging Triggers

调试触发场景

  • "The form didn't submit correctly"
  • "Some fields are empty after filling"
  • "Verification failed"
  • "表单提交失败"
  • "填充后部分字段为空"
  • "验证失败"

What This Skill Does

本技能的功能

This skill automates web form filling with safety controls and user approval at every critical step:
  1. Form Discovery - Identifies all form fields on the page
  2. Permission Planning - Presents approach to user via update_plan
  3. Field Identification - Maps fields to user data with confirmation
  4. Incremental Filling - Fills one field at a time with verification
  5. Pre-Submission Review - Shows all filled values before submit
  6. Submission Control - Submits only after explicit user approval
  7. Confirmation Verification - Validates successful submission
本技能可自动化网页表单填充，并在每个关键步骤设置安全控制和用户批准：
  1. 表单识别 - 识别页面上的所有表单字段
  2. 权限规划 - 通过update_plan向用户展示执行方案
  3. 字段匹配 - 将字段与用户数据匹配并确认
  4. 增量填充 - 逐个填充字段并进行验证
  5. 提交前审核 - 提交前展示所有已填充的值
  6. 提交控制 - 仅在获得用户明确批准后提交
  7. 确认验证 - 验证提交是否成功

Safety-First Workflow

安全优先的工作流

Phase 1: Discovery and Planning

阶段1：识别与规划

1. Get Tab Context
Call: tabs_context_mcp(createIfEmpty=true)
Verify: Tab group exists and tab ID is valid
2. Read Page for Form Fields
Call: read_page(tabId, filter="interactive")
Identify: All input fields, selects, textareas, checkboxes, radio buttons
Extract: Field labels, types, current values, required status
3. Present Plan to User
Call: update_plan(
  domains=["current-domain.com"],
  approach=[
    "Identify all form fields on [page name]",
    "Fill [X] fields with provided data",
    "Verify each field after filling",
    "Request approval before submission",
    "Submit form and verify confirmation"
  ]
)
User must approve plan before proceeding.
1. 获取标签页上下文
Call: tabs_context_mcp(createIfEmpty=true)
Verify: Tab group exists and tab ID is valid
2. 读取页面表单字段
Call: read_page(tabId, filter="interactive")
Identify: All input fields, selects, textareas, checkboxes, radio buttons
Extract: Field labels, types, current values, required status
3. 向用户展示执行方案
Call: update_plan(
  domains=["current-domain.com"],
  approach=[
    "Identify all form fields on [page name]",
    "Fill [X] fields with provided data",
    "Verify each field after filling",
    "Request approval before submission",
    "Submit form and verify confirmation"
  ]
)
必须获得用户批准后才能继续。

Phase 2: Field Mapping and Approval

阶段2：字段匹配与批准

4. Map Fields to User Data
Present structured summary to user:
Found [X] fields on [Form Name]:

Required Fields:
- First Name (text input) → [User's data or ASK]
- Email (email input) → [User's data or ASK]
- Phone (tel input) → [User's data or ASK]

Optional Fields:
- Company (text input) → [User's data or SKIP]
- Comments (textarea) → [User's data or SKIP]

SENSITIVE FIELDS (you must fill manually):
- Password (password input) → USER MUST FILL
- Credit Card (text input) → USER MUST FILL

Proceed with filling [X] fields? (yes/no)
Critical Rules:
  • ❌ NEVER fill password fields
  • ❌ NEVER fill credit card fields
  • ❌ NEVER fill SSN/banking fields
  • ❌ NEVER fill fields marked "sensitive" by context
  • ✅ ALWAYS get explicit approval for data mapping
  • ✅ ALWAYS show which fields will be filled
4. 将字段与用户数据匹配
向用户展示结构化摘要：
Found [X] fields on [Form Name]:

Required Fields:
- First Name (text input) → [User's data or ASK]
- Email (email input) → [User's data or ASK]
- Phone (tel input) → [User's data or ASK]

Optional Fields:
- Company (text input) → [User's data or SKIP]
- Comments (textarea) → [User's data or SKIP]

SENSITIVE FIELDS (you must fill manually):
- Password (password input) → USER MUST FILL
- Credit Card (text input) → USER MUST FILL

Proceed with filling [X] fields? (yes/no)
核心规则：
  • ❌ 绝不要填充密码字段
  • ❌ 绝不要填充信用卡字段
  • ❌ 绝不要填充社保号/银行字段
  • ❌ 绝不要填充上下文标记为“敏感”的字段
  • ✅ 始终获得数据匹配的明确批准
  • ✅ 始终展示将要填充的字段

Phase 3: Incremental Filling

阶段3：增量填充

5. Fill Each Field One at a Time
For each approved field:
Step 1: Find element
  Call: find(tabId, query="[field label or purpose]")
  Verify: Element reference returned

Step 2: Fill field
  Call: form_input(tabId, ref="ref_X", value="[user data]")

Step 3: Verify filled value
  Call: read_page(tabId, ref_id="ref_X")
  Confirm: Value matches expected input

Step 4: Handle errors
  If verification fails:
    - Report to user
    - Ask for correction approach
    - Retry with alternative method (computer tool for typing)
Example filling sequence:
✅ Filled "First Name" → "John" (verified)
✅ Filled "Last Name" → "Smith" (verified)
✅ Filled "Email" → "john@example.com" (verified)
⚠️ Failed "Phone" → retry needed
✅ Filled "Phone" → "(555) 123-4567" (verified after retry)
5. 逐个填充每个字段
对于每个已批准的字段：
Step 1: Find element
  Call: find(tabId, query="[field label or purpose]")
  Verify: Element reference returned

Step 2: Fill field
  Call: form_input(tabId, ref="ref_X", value="[user data]")

Step 3: Verify filled value
  Call: read_page(tabId, ref_id="ref_X")
  Confirm: Value matches expected input

Step 4: Handle errors
  If verification fails:
    - Report to user
    - Ask for correction approach
    - Retry with alternative method (computer tool for typing)
填充序列示例：
✅ Filled "First Name" → "John" (verified)
✅ Filled "Last Name" → "Smith" (verified)
✅ Filled "Email" → "john@example.com" (verified)
⚠️ Failed "Phone" → retry needed
✅ Filled "Phone" → "(555) 123-4567" (verified after retry)

Phase 4: Pre-Submission Review

阶段4：提交前审核

6. Show Complete Form State
Before submission, present ALL filled values:
Form ready for submission:

First Name: John
Last Name: Smith
Email: john@example.com
Phone: (555) 123-4567
Company: [empty - optional]
Comments: [empty - optional]

UNFILLED SENSITIVE FIELDS (you must complete):
- Password: [EMPTY - FILL MANUALLY]

Submit this form? (yes/no/edit)
User must explicitly approve submission.
6. 展示完整表单状态
提交前，展示所有已填充的值：
Form ready for submission:

First Name: John
Last Name: Smith
Email: john@example.com
Phone: (555) 123-4567
Company: [empty - optional]
Comments: [empty - optional]

UNFILLED SENSITIVE FIELDS (you must complete):
- Password: [EMPTY - FILL MANUALLY]

Submit this form? (yes/no/edit)
必须获得用户明确批准才能提交。

Phase 5: Submission and Verification

阶段5：提交与验证

7. Submit Form
Only after approval:
Step 1: Find submit button
  Call: find(tabId, query="submit button")

Step 2: Click submit
  Call: computer(tabId, action="left_click", ref="ref_submit")

Step 3: Wait for navigation/response
  Call: computer(tabId, action="wait", duration=2)
8. Verify Confirmation
After submission:
Step 1: Read new page
  Call: read_page(tabId)

Step 2: Look for confirmation indicators:
  - Success message
  - Thank you page
  - Confirmation number
  - Email sent notice
  - Error messages

Step 3: Report outcome to user
  Success: "Form submitted successfully. Confirmation: [details]"
  Failure: "Submission failed: [error message]. Next steps: [guidance]"
7. 提交表单
仅在获得批准后执行：
Step 1: Find submit button
  Call: find(tabId, query="submit button")

Step 2: Click submit
  Call: computer(tabId, action="left_click", ref="ref_submit")

Step 3: Wait for navigation/response
  Call: computer(tabId, action="wait", duration=2)
8. 验证提交确认
提交后：
Step 1: Read new page
  Call: read_page(tabId)

Step 2: Look for confirmation indicators:
  - Success message
  - Thank you page
  - Confirmation number
  - Email sent notice
  - Error messages

Step 3: Report outcome to user
  Success: "Form submitted successfully. Confirmation: [details]"
  Failure: "Submission failed: [error message]. Next steps: [guidance]"

Field Filling Process

字段填充流程

Supported Field Types

支持的字段类型

Field TypeMethodVerification
Text input
form_input()
Read value back
Email input
form_input()
Validate format + read back
Tel input
form_input()
Read value back
Textarea
form_input()
Read value back
Select dropdown
form_input()
Read selected option
Checkbox
form_input(value=true/false)
Read checked state
Radio button
computer(action="left_click")
Read selected state
Date input
form_input()
Read date value
字段类型方法验证方式
文本输入框
form_input()
回读值
邮箱输入框
form_input()
验证格式 + 回读
电话输入框
form_input()
回读值
文本域
form_input()
回读值
下拉选择框
form_input()
回读选中选项
复选框
form_input(value=true/false)
回读选中状态
单选按钮
computer(action="left_click")
回读选中状态
日期输入框
form_input()
回读日期值

Fallback Strategy

回退策略

If 
form_input()
fails:
  1. Try 
    computer(action="left_click")
    to focus field
  2. Use 
    computer(action="type", text="value")
    to type
  3. Verify value with 
    read_page()
  4. Report persistent failures to user
如果
form_input()
失败：
  1. 尝试
    computer(action="left_click")
    聚焦字段
  2. 使用
    computer(action="type", text="value")
    手动输入
  3. 用
    read_page()
    验证值
  4. 向用户报告持续存在的失败

Validation Patterns

验证模式

Email validation:
Regex: ^[^\s@]+@[^\s@]+\.[^\s@]+$
Check: Value contains @ and domain
Phone validation:
Format: Various (555) 123-4567, 555-123-4567, +1-555-123-4567
Strategy: Fill as provided, verify field accepts it
Required field check:
Before submission:
- Verify all required fields have values
- Report missing required fields to user
- Block submission until complete
邮箱验证：
Regex: ^[^\s@]+@[^\s@]+\.[^\s@]+$
Check: Value contains @ and domain
电话验证：
Format: Various (555) 123-4567, 555-123-4567, +1-555-123-4567
Strategy: Fill as provided, verify field accepts it
必填字段检查：
Before submission:
- Verify all required fields have values
- Report missing required fields to user
- Block submission until complete

Verification and Submission

验证与提交

Pre-Submission Checklist

提交前检查清单

Before calling submit:
  • All required fields filled
  • All values verified correct
  • User approved field mapping
  • User approved submission
  • Sensitive fields flagged for manual entry
  • No errors on page
调用提交前：
  • 所有必填字段已填充
  • 所有值已验证正确
  • 用户已批准字段匹配
  • 用户已批准提交
  • 敏感字段已标记为手动输入
  • 页面无错误

Error Handling

错误处理

Form validation errors:
After submission attempt, if errors appear:
1. Read error messages
2. Map errors to fields
3. Report to user: "Field [X] error: [message]"
4. Ask user for corrected value
5. Re-fill and re-verify
6. Request submission approval again
Network errors:
If submission fails due to network:
1. Report error to user
2. Offer to retry
3. Verify form state preserved
4. Re-attempt with user approval
表单验证错误：
After submission attempt, if errors appear:
1. Read error messages
2. Map errors to fields
3. Report to user: "Field [X] error: [message]"
4. Ask user for corrected value
5. Re-fill and re-verify
6. Request submission approval again
网络错误：
If submission fails due to network:
1. Report error to user
2. Offer to retry
3. Verify form state preserved
4. Re-attempt with user approval

Supporting Files

支持文件

references/reference.md

references/reference.md

  • Chrome MCP tool reference
  • Form field type specifications
  • Permission workflow patterns
  • Error handling strategies
  • Chrome MCP工具参考
  • 表单字段类型规范
  • 权限工作流模式
  • 错误处理策略

examples/examples.md

examples/examples.md

  • Complete form filling workflows
  • Error recovery examples
  • Multi-page form handling
  • Dynamic form scenarios
  • 完整的表单填充工作流
  • 错误恢复示例
  • 多页面表单处理
  • 动态表单场景

scripts/validate_form.py

scripts/validate_form.py

  • Validates form data before submission
  • Checks for common input errors
  • Suggests corrections
  • 提交前验证表单数据
  • 检查常见输入错误
  • 建议修正方案

Expected Outcomes

预期结果

Successful Form Fill

表单填充成功

✅ Form Fill Complete

Form: Contact Us (example.com/contact)
Fields filled: 6/8 (2 optional skipped)
User filled manually: 1 (password)

Filled fields:
  ✓ First Name: John
  ✓ Last Name: Smith
  ✓ Email: john@example.com
  ✓ Phone: (555) 123-4567
  ✓ Message: [75 chars]
  ✓ Subscribe: Yes

Submission: Successful
Confirmation: "Thank you! We'll respond within 24 hours."

Next steps: Check email for confirmation message
✅ Form Fill Complete

Form: Contact Us (example.com/contact)
Fields filled: 6/8 (2 optional skipped)
User filled manually: 1 (password)

Filled fields:
  ✓ First Name: John
  ✓ Last Name: Smith
  ✓ Email: john@example.com
  ✓ Phone: (555) 123-4567
  ✓ Message: [75 chars]
  ✓ Subscribe: Yes

Submission: Successful
Confirmation: "Thank you! We'll respond within 24 hours."

Next steps: Check email for confirmation message

Partial Fill (Manual Intervention Needed)

部分填充（需要手动干预）

⚠️ Form Partially Filled

Form: Registration (site.com/register)
Fields filled: 8/12
Blocked on: 4 fields require manual entry

Filled fields: [list]

USER MUST FILL MANUALLY:
  ⚠ Password (sensitive)
  ⚠ Confirm Password (sensitive)
  ⚠ Credit Card (sensitive)
  ⚠ CVV (sensitive)

Status: Ready for user to complete sensitive fields
Action: Complete the 4 sensitive fields, then I can submit
⚠️ Form Partially Filled

Form: Registration (site.com/register)
Fields filled: 8/12
Blocked on: 4 fields require manual entry

Filled fields: [list]

USER MUST FILL MANUALLY:
  ⚠ Password (sensitive)
  ⚠ Confirm Password (sensitive)
  ⚠ Credit Card (sensitive)
  ⚠ CVV (sensitive)

Status: Ready for user to complete sensitive fields
Action: Complete the 4 sensitive fields, then I can submit

Requirements

要求

Browser Setup

浏览器设置

  • Chrome browser with Claude-in-Chrome MCP extension
  • Active tab group (created via tabs_context_mcp)
  • Form page loaded and visible
  • 安装有Claude-in-Chrome MCP扩展的Chrome浏览器
  • 活跃的标签页组（通过tabs_context_mcp创建）
  • 表单页面已加载并可见

User Data

用户数据

  • Required field values provided by user
  • Data format matches field expectations
  • User available for approval prompts
  • 用户提供必填字段的值
  • 数据格式符合字段要求
  • 用户可随时响应批准提示

Permissions

权限

  • User must approve plan (update_plan)
  • User must approve field mapping
  • User must approve submission
  • User must fill sensitive fields manually
  • 用户必须批准执行方案（update_plan）
  • 用户必须批准字段匹配
  • 用户必须批准提交
  • 用户必须手动填写敏感字段

Red Flags to Avoid

需要避免的警示信号

Critical Safety Violations:
  • ❌ Filling password fields automatically
  • ❌ Filling credit card numbers
  • ❌ Filling SSN or banking information
  • ❌ Submitting without user approval
  • ❌ Skipping field verification
Workflow Violations:
  • ❌ Filling all fields before verification
  • ❌ Proceeding without update_plan approval
  • ❌ Assuming field mapping without user confirmation
  • ❌ Submitting on errors
Tool Misuse:
  • ❌ Using computer tool as first choice (use form_input first)
  • ❌ Not verifying tab context exists
  • ❌ Not handling element reference failures
  • ❌ Skipping post-fill verification
User Experience Issues:
  • ❌ Not presenting clear field summary
  • ❌ Not reporting verification failures
  • ❌ Not explaining why sensitive fields blocked
  • ❌ Not providing confirmation details
严重安全违规：
  • ❌ 自动填充密码字段
  • ❌ 自动填充信用卡号
  • ❌ 自动填充社保号或银行信息
  • ❌ 未获得用户批准就提交
  • ❌ 跳过字段验证
工作流违规：
  • ❌ 验证前填充所有字段
  • ❌ 未获得update_plan批准就继续
  • ❌ 未获得用户确认就假设字段匹配
  • ❌ 存在错误时仍提交
工具误用：
  • ❌ 首选computer工具（应先使用form_input）
  • ❌ 未验证标签页上下文是否存在
  • ❌ 未处理元素引用失败
  • ❌ 跳过填充后验证
用户体验问题：
  • ❌ 未展示清晰的字段摘要
  • ❌ 未报告验证失败
  • ❌ 未解释为何敏感字段被阻止填充
  • ❌ 未提供确认详情

Notes

注意事项

Key Principles:
  1. Permission First - Always get approval before major actions
  2. Incremental Verification - Verify each field immediately after filling
  3. Sensitive Data Protection - Never automate sensitive field entry
  4. Error Transparency - Report all failures clearly
  5. User Control - User can stop/edit at any point
Common Patterns:
  • Multi-page forms: Treat each page as separate workflow
  • Dynamic forms: Re-scan after field changes trigger new fields
  • Conditional fields: Only fill visible/enabled fields
  • File uploads: Use upload_image tool (separate workflow)
Integration with Other Skills:
  • Works with chrome-workflow-recorder for documenting process
  • Complements chrome-data-extractor for reading results
  • Pairs with update_plan for complex multi-step forms
核心原则：
  1. 权限优先 - 重大操作前始终获得批准
  2. 增量验证 - 填充每个字段后立即验证
  3. 敏感数据保护 - 绝不自动填充敏感字段
  4. 错误透明 - 清晰报告所有失败
  5. 用户控制 - 用户可随时停止/编辑
常见模式：
  • 多页面表单：将每个页面视为独立工作流
  • 动态表单：字段变化触发新字段后重新扫描
  • 条件字段：仅填充可见/启用的字段
  • 文件上传：使用upload_image工具（独立工作流）
与其他技能的集成：
  • 与chrome-workflow-recorder配合记录流程
  • 与chrome-data-extractor互补读取结果
  • 与update_plan配合处理复杂的多步骤表单