Quick Fill - Chrome Extension

Automatically fill form fields with test data for quick manual testing of SaaS applications.

Features

• Smart Field Detection: Automatically detects field types (email, name, phone, address, etc.)
• Instant Fill: Click the extension icon to fill all visible form fields
• Framework Compatible: Triggers proper events for React, Vue, Angular, and other frameworks
• Zero Configuration: Works out of the box, no setup needed
• Multi-page Support: Click fill again on new pages or when new fields appear

Installation

Step 1: Generate Icons

1. Open create-icons.html in Chrome (double-click the file)
2. Click each "Download" button to save the three icon files
3. Save them in the quick-fill directory (same location as other files)

Step 2: Load Extension

1. Open Chrome and navigate to chrome://extensions/
2. Enable "Developer mode" (toggle in top-right corner)
3. Click "Load unpacked"
4. Select the quick-fill directory
5. The Quick Fill extension is now installed!

Usage

1. Navigate to any web form (or open test-form.html for testing)
2. Click the Quick Fill extension icon in your Chrome toolbar
3. All visible form fields will be automatically filled with test data
4. If new fields appear or you navigate to a new page, click again

Quick Test

Open test-form.html in Chrome to see the extension in action with a comprehensive test form that includes all supported field types.

Supported Field Types

The extension intelligently detects and fills:

• Text inputs: name, username, company, etc.
• Email fields: Generates test email addresses
• Phone numbers: Uses 555-0100 format
• Addresses: Street, city, state, zip, country
• Dates and times: Current date and default times
• URLs: Example URLs
• Passwords: Test passwords
• Numbers: Default numeric values
• Textareas: Multi-line test data
• Select dropdowns: Picks first valid option
• Checkboxes: Checks them
• Radio buttons: Selects first in group

Field Detection

The extension uses multiple strategies to detect field types:

• HTML5 input types (email, tel, url, date, etc.)
• Field names and IDs
• Labels and placeholders
• Common naming patterns (firstName, lastName, phone, etc.)

How It Works

When you click the extension icon:

1. Content script scans the page for all form elements
2. Detects field types using intelligent pattern matching
3. Generates appropriate test data for each field
4. Fills fields and triggers proper change events
5. Shows a notification with the count of fields filled

Notes

• Only fills visible, enabled, non-readonly fields
• Skips file upload inputs (for now)
• Triggers input, change, and blur events for framework compatibility
• Can be clicked multiple times as forms dynamically update

Future Enhancements

• Floating button on page for easier access
• Visual feedback (highlight filled fields)
• Save/load custom test data profiles
• Handle file uploads
• Support for rich text editors
• Custom data templates per domain
• Edge case detection and handling

Development

To modify the extension:

1. Edit the source files
2. Go to chrome://extensions/
3. Click the refresh icon on the Quick Fill extension card
4. Test your changes

File Structure

• manifest.json: Extension configuration
• background.js: Handles extension icon clicks
• content.js: Main logic for detecting and filling forms
• icon*.png: Extension icons (placeholders for now)

Troubleshooting

Extension icon doesn't respond:

• Make sure you're on a web page (not chrome:// pages)
• Check the Chrome Extensions page for errors

Fields not filling:

• Ensure fields are visible on the page
• Check browser console for any errors
• Try clicking the icon again after the page fully loads

Wrong data in fields:

• The MVP uses simple pattern matching
• Future versions will have better detection and custom data

License

MIT