Chrome Form Filler

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.

When to Use This Skill
What This Skill Does
Safety-First Workflow
Field Filling Process
Verification and Submission
Supporting Files
Expected Outcomes
Requirements
Red Flags to Avoid

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:

Form Discovery - Identifies all form fields on the page
Permission Planning - Presents approach to user via update_plan
Field Identification - Maps fields to user data with confirmation
Incremental Filling - Fills one field at a time with verification
Pre-Submission Review - Shows all filled values before submit
Submission Control - Submits only after explicit user approval
Confirmation Verification - Validates successful submission

Safety-First Workflow

Phase 1: Discovery and Planning

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.

Phase 2: Field Mapping and Approval

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

Phase 3: Incremental Filling

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)

Phase 4: Pre-Submission Review

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.

Phase 5: Submission and Verification

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]"

Field Filling Process

Supported Field Types

Field Type	Method	Verification
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

Fallback Strategy

form_input()

fails:

Try
```
computer(action="left_click")
```
to focus field
Use
```
computer(action="type", text="value")
```
to type
Verify value with
```
read_page()
```
Report persistent failures to user

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

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

Supporting Files

references/reference.md

Chrome MCP tool reference
Form field type specifications
Permission workflow patterns
Error handling strategies

examples/examples.md

Complete form filling workflows
Error recovery examples
Multi-page form handling
Dynamic form scenarios

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

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

Requirements

Browser Setup

Chrome browser with Claude-in-Chrome MCP extension
Active tab group (created via tabs_context_mcp)
Form page loaded and visible

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

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

Notes

Key Principles:

Permission First - Always get approval before major actions
Incremental Verification - Verify each field immediately after filling
Sensitive Data Protection - Never automate sensitive field entry
Error Transparency - Report all failures clearly
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

chrome-form-filler

NPX Install

Tags

SKILL.md Content