Filler

A Chrome extension for managing autofill profiles and filling web forms with a single click. Create reusable profiles for addresses, logins, and more — then fill any form instantly from the popup.

Built for QA workflows, form testing, and anyone tired of typing the same data over and over.

Features

• Profile management — Create and organize multiple profiles by type (Address, Login)
• Smart field detection — Heuristic scoring engine that matches form fields using autocomplete attributes, names, IDs, labels, placeholders, and ARIA labels
• One-click autofill — Fill matched fields from the popup, with framework-aware event dispatching (works with React, Vue, Angular, and vanilla forms)
• Form submission listening — Optionally detect form submissions and prompt to save the data as a new profile or update an existing one
• Profile matching — Automatically suggests existing profiles to update based on field similarity
• Sensitive data masking — Passwords and sensitive fields are masked in the save prompt preview
• Extensible form types — Adding a new form type is a single declarative configuration

Tech Stack

• TypeScript (strict mode, ES2022)
• Vite 8 (build & watch)
• Chrome Extension Manifest V3
• Chrome Storage API for local persistence
• No external UI frameworks — pure CSS

Getting Started

Prerequisites

• Node.js (v18+)
• A Chromium-based browser (Chrome, Edge, Brave, Arc, etc.)

Install & Build

git clone https://github.com/coldiary/filler.git
cd filler
npm install
npm run build

Load the Extension

1. Open chrome://extensions in your browser
2. Enable Developer mode (top-right toggle)
3. Click Load unpacked and select the dist/ folder
4. Pin the Filler extension to your toolbar

Development

npm run dev

This starts Vite in watch mode. After each rebuild, go to chrome://extensions and click the reload button on the Filler card (or press the refresh icon).

Project Structure

src/
  background/
    service-worker.ts       # MV3 service worker — message routing & storage
  content/
    content.ts              # Content script entry point
    autofill.ts             # Field filling logic (input, select, framework compat)
    field-matchers.ts       # Heuristic field detection & scoring engine
    form-listener.ts        # Form submission detection & data extraction
  popup/
    popup.html / .css / .ts # Main popup — profile list, filtering, quick actions
  profiles/
    profile-editor.html / .css / .ts  # Profile create/edit UI
  save-prompt/
    save-prompt.ts / .css   # Injected save dialog (shadow DOM)
  settings/
    settings.html / .css / .ts  # Settings modal
  lib/
    constants.ts            # Form type registry & field definitions
    storage.ts              # Chrome storage wrapper
    utils.ts                # Shared helpers
  types/
    index.ts                # TypeScript types & message contracts
  manifest.json             # Extension manifest (MV3)
icons/                      # Extension icons (16, 48, 128)
tests/
  test-form.html            # 7 test forms for manual validation

How It Works

Field Matching

Filler scores each visible form element against known field definitions using weighted heuristics:

Signal	Weight
autocomplete attr	100
name attr	60
id attr	50
type attr	40
<label> text	30
placeholder	20
ARIA labels	15

Fields are assigned greedily — each element maps to at most one profile field, and vice versa.

Autofill

When filling, Filler sets values using native property descriptors and dispatches input, change, and blur events. This ensures compatibility with controlled components in React, Vue, and other frameworks.

For <select> elements, matching tries exact value, text content, country code/name mapping, and partial matches as fallbacks.

Form Submission Detection

When enabled in settings, Filler listens for form submissions on the page. It extracts field data using the same matching engine, auto-detects the form type based on field presence thresholds, and shows an injected save prompt (rendered in a shadow DOM to avoid style conflicts).

Message Passing

Communication between extension contexts uses typed discriminated unions:

• AUTOFILL — Popup to Content: fill form fields with a profile
• FORM_SUBMITTED — Content to Background: extracted form data
• SHOW_SAVE_PROMPT — Background to Content: trigger save dialog
• SAVE_PROFILE — Save Prompt to Background: persist profile
• GET_PROFILES / GET_SETTINGS — Data fetch requests

Adding a New Form Type

Form types are fully declarative. Add a new entry to FORM_TYPES in src/lib/constants.ts:

{
  key: 'payment',
  label: 'Payment',
  icon: '<svg>...</svg>',
  badgeColor: '#10b981',
  fields: [
    { key: 'cardNumber', label: 'Card Number', autocomplete: 'cc-number', ... },
    // ...
  ],
  editorSections: [...],
  editorFieldRows: [...],
  detectionKeys: ['cardNumber', 'cardHolder', 'expiry', 'cvv'],
  detectionThreshold: 3,
  buildSummary: (p) => `${p.cardNumber || 'Card'}`,
}

Then add keyword matchers for the new fields in src/content/field-matchers.ts.

Testing

Open tests/test-form.html in your browser with the extension loaded. The page includes 7 form variants:

1. Standard Form — common field names and IDs
2. Autocomplete Form — relies on autocomplete attributes with unusual names
3. Label-Only Form — generic names, detection via labels
4. Placeholder-Only Form — detection via placeholders
5. Login Form — username, password, email
6. Login Form (Placeholder Only) — login fields without labels
7. Minimal Form — email + name only, tests detection thresholds

Permissions

Permission	Purpose
storage	Read/write profiles and settings locally
activeTab	Access the active tab for message passing
scripting	Inject the save prompt script and styles

Content scripts run on all URLs (<all_urls>) to enable autofill on any page.

License

MIT