dawiddutoit/custom-claude/chrome-form-filler

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

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

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