chrome-form-filler

What this skill does

# 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.

## 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

## 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

## 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" → "[email protected]" (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: [email protected]
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

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

### 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