Smart Filler

Semantic form filling for the web — your profile data, mapped intelligently by LLMs.

Smart Filler is a Chrome Extension that uses a lightweight DOM-to-LLM architecture to fill web forms semantically (e.g. insurance quoting website). Instead of brittle CSS selectors or rigid field mappings, Smart Filler extracts the form structure from the page, sends it to an LLM along with your profile, and lets the model decide which data goes where. It works across any website without per-site configuration.

---

How It Works

┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  1. Extract  │ ──▶ │  2. LLM Map  │ ──▶ │  3. Inject   │
│  Form Fields │     │  Profile→Form│     │  Via Events  │
└──────────────┘     └──────────────┘     └──────────────┘

1. Extract — Smart Filler scans the active tab for form elements (<input>, <select>, <textarea>), collecting labels, placeholders, aria-label attributes, autocomplete hints, and option lists.
2. LLM Map — The field descriptors and your profile JSON are sent to an LLM (OpenAI, Anthropic, or any OpenAI-compatible endpoint). The LLM returns a JSON mapping of field indices to values.
3. Inject — Values are written into the DOM using native browser events (input, change, blur), so React, Angular, Vue, and server-rendered forms all respond correctly.

Why an LLM?

Traditional form fillers rely on autocomplete attributes, name heuristics, or hardcoded XPath selectors — each fragile in its own way. An LLM reads the form the same way a human does: by understanding what each field means from its label and context, then deciding which piece of profile data fits.

---

Installation (Developer Mode)

1. Clone the repo

   git clone https://github.com/szjunma/smart-filler.git

2. Open Chrome Extensions Navigate to chrome://extensions in Chrome.

3. Enable Developer Mode Toggle the switch in the top-right corner.

4. Load Unpacked Click Load unpacked and select the smart-filler/ directory.

5. Pin the extension Click the puzzle icon in the toolbar, find Smart Filler, and pin it.

---

Setup & Usage

1. Configure your LLM provider

Provider	Default Model	Endpoint
OpenRouter	openai/gpt-oss-120b:free	openrouter.ai
OpenAI	gpt-4o-mini	api.openai.com
Anthropic	claude-haiku-4-5	api.anthropic.com
Custom	Any model	Your own endpoint

Open the extension popup, select a provider, and paste your API key. The API key is stored locally in Chrome's extension storage — it never leaves your browser except to call the LLM API directly.

2. Edit your profile data

The popup includes a JSON editor pre-seeded with common fields. Replace it with your own data:

{
  "firstName": "Jane",
  "lastName": "Doe",
  "email": "jane@example.com",
  "phone": "555-0100",
  "address": "123 Main St, Springfield, IL 62701",
  "dateOfBirth": "1990-05-15",
  "gender": "female",
  "occupation": "Software Engineer",
  "company": "Acme Corp"
}

Any JSON structure works — the LLM interprets the keys and matches them to form fields. You can add custom keys like licenseNumber, vin, annualMileage, or policyExpirationDate and the LLM will figure out where they go.

3. Fill a form

Navigate to any page with a form. Click the Smart Filler icon, then click Fill Form. The extension extracts the fields, maps your profile, and fills the form in seconds.

---

Project Structure

smart-filler/
├── manifest.json    # Chrome Extension manifest (Manifest V3)
├── content.js       # Field extraction & injection (runs on the page)
├── popup.html       # Extension popup UI
├── popup.js         # Popup logic, storage, LLM API calls
├── icons/           # Extension icons (16, 48, 128 px)
└── README.md

---

Privacy

• Your API key and profile data are stored in Chrome's local extension storage (chrome.storage.local).
• The only network request is directly from your browser to the LLM API endpoint you configure.
• No analytics, no telemetry, no third-party servers.
• Form field data is sent to the LLM only when you click Fill Form.

---

License

MIT © 2026 Smart Filler contributors