# TypeLess — Auto Form Filler

Browser extension for Chrome / Edge that saves web form data as profiles and auto-fills them with one click.

![TypeLess Banner](icons/icon.png)

## Screenshots
![Media Preview](Screenshot.png)

---

## ✨ Key Features

### 🚀 Core Form Filling
- ⚡ **One-Click Fill** — Fill an entire form instantly with a saved profile
- 📝 **Unlimited Profiles** — Create and manage as many profiles as you need
- 🎯 **Smart Field Matching** — Matches saved values to form fields by CSS selector, name, id, and label
- 🔄 **Quick Switch** — Switch between profiles from the floating toolbar in one tap

### 🧠 Smart Fill
- 🤖 **Auto Data Generation** — Generates realistic test data (names, emails, phones, addresses, dates…)
- ⚡ **Lightning Fill** — Click the bolt icon to instantly populate empty fields
- 🎲 **Randomized Output** — Each Smart Fill produces unique data; ideal for QA and testing

### 🎯 Focus After Fill
- Mark any field as the **Focus target** — cursor jumps to that field after applying a profile
- A field can be marked Focus **without saving its value** (`focusOnly` mode) — useful for fields you always type manually (OTP, CAPTCHA, search)
- Visual cue in the Save Profile dialog: 🔵 blue border = value saved + focused; 🟠 orange border = focus only, value not saved

### 🌍 Multi-Language Support
- 🇺🇸 English · 🇻🇳 Vietnamese · 🇨🇳 Simplified Chinese · 🇹🇼 Traditional Chinese · 🇯🇵 Japanese · 🇰🇷 Korean
- Language switches instantly across the entire UI
- Language-specific fonts (WOFF2) for optimal CJK rendering

### 🛠️ Advanced Tools
- 💾 **Save HTML** — Export the current page's rendered HTML for debugging
- 🖱️ **Unlock Right-Click** — Remove `readonly` / `disabled` on locked fields; re-enable context menus
- 📸 **Screenshot** — Full-page or visible-area capture; toolbar hidden automatically during capture
- 📱 **Mobile Emulation** — Switch User-Agent to Android / iOS / macOS / Windows / Linux; simulates touch events
- 🔄 **User-Agent Switcher** — Custom UA strings configurable from the Settings page

### 💾 Data Management
- 📤 **Export** — Backup all profiles + settings to a JSON file
- 📥 **Import** — Restore from backup; reports added / updated / skipped counts separately
- 📋 **Copy / Paste** — Duplicate a profile to clipboard and paste it in another tab or device
- 🗑️ **Delete** — Remove individual profiles or clear all at once

### 🏢 Enterprise Deployment
Pre-configure profiles for org-wide rollout via `default.json`:
1. Edit `default.json` — add profiles in the standard export format
2. Package and distribute the extension folder
3. Profiles auto-import on first install; users can still add their own

*Designed for developer-mode / unpacked deployment. No internet required.*

### ⌨️ Keyboard Shortcuts

| Shortcut | Action |
|---|---|
| `Ctrl+Shift+H` / `Cmd+Shift+H` | Toggle toolbar visibility |
| *(configurable in Chrome settings)* | Apply last used profile |
| *(configurable)* | Open Settings |
| *(configurable)* | Full-page screenshot |
| *(configurable)* | Visible-area screenshot |
| *(configurable)* | Unlock right-click |
| *(configurable)* | Save HTML |
| *(configurable)* | Reset User-Agent |

### 🔒 Privacy & Security
- 🔐 **100% Local Storage** — All data stays on your device (Chrome/Edge storage API)
- 🛡️ **AES-256-GCM Encryption** — Every profile is encrypted before writing to storage using a per-device key derived with PBKDF2-SHA256 (310,000 iterations). Raw field values are never stored in plaintext.
- 🚫 **No Cloud, No Servers** — Nothing is ever transmitted externally
- ⚠️ **Sensitive Field Warning** — When saving a profile on a login page (password/PIN/OTP fields detected), a warning banner appears with an option to exclude those fields.
- 🛡️ **Trusted Types API** — DOM XSS defense: a `typeless#html` TrustedTypePolicy is the sole entry-point for any `innerHTML` operation. User-controlled data is rendered via `DOMBuilder` (imperative DOM — no innerHTML).
- 🔒 **No Tracking** — Zero analytics or usage monitoring
- 🔒 **No Remote Code** — No `eval()`, no dynamic script loading; all logic runs locally

---

## 📥 Installation

### Chrome / Edge — Developer Mode

1. Download and unzip this repository
2. Open `chrome://extensions/` (Chrome) or `edge://extensions/` (Edge)
3. Enable **Developer mode** (top-right toggle)
4. Click **Load unpacked** → select the `Typeless_secure` folder
5. The TypeLess toolbar appears at the bottom of every webpage automatically

### Enterprise Setup (Optional)

1. Open `default.json` inside the extension folder
2. Replace `"profiles": []` with your profile array (same format as an exported backup)
3. Distribute the modified folder; profiles load automatically on first install for every user

---

## 🚀 Usage

### 1 · Save a Profile
1. Fill in a web form as usual
2. Click **Save** (💾) on the toolbar
3. Choose which fields to save, optionally mark a Focus field, name the profile → **Save Profile**

### 2 · Auto-Fill
- **Toolbar:** Click a profile chip to fill instantly
- **Popup:** Click the ▶️ Play button next to a profile name

### 3 · Smart Fill
Click the ⚡ bolt icon — TypeLess detects field types (name, email, phone, address…) and fills them with generated data based on your personal info in **Settings → Personal Info**.

### 4 · Manage Profiles
- **Edit** field values, selectors, labels — **Settings → Profiles**
- **Export / Import** — **Settings → Data Management**
- **Copy** to clipboard; **Paste** in another tab or device

---

## 🛠️ Project Structure

```
Typeless_fixed/
├── manifest.json          # Manifest V3 — permissions, commands, content scripts
├── background.js          # Service worker — install handler, context menus, keyboard commands
├── content.js             # Toolbar UI, Save Profile modal, form fill logic
├── dom-utils.js           # Trusted Types policy + safe DOMBuilder (anti-XSS)
├── crypto-utils.js        # AES-256-GCM profile encryption (Web Crypto API)
├── storage.js             # StorageManager — transparent encrypt/decrypt on read-write
├── i18n.js                # Internationalization — 6 languages, lazy-loaded JSON
├── enhanced-utils.js      # Native value setter, FineUI / ExtJS ComboBox support
├── smart-fill.js          # Field type detection and random data generation
├── popup.html / popup.js  # Extension popup (profile list + tools)
├── options.html / options.js  # Settings page (personal info, UA, data, profiles)
├── styles.css             # Toolbar & modal styles (loaded inside Shadow DOM only)
├── screenshot.js          # Full-page scroll-and-stitch screenshot logic
├── mobile-override.js     # Touch event simulation for mobile emulation
├── user-agent.js          # User-Agent switching via declarativeNetRequest
├── default.json           # Enterprise default profiles configuration
├── demo-form.html         # Local test form for development
├── privacy.html           # Privacy Policy page
├── locales/               # Translation JSON (vi, zh-CN, zh-TW, ko, ja)
├── icons/                 # SVG & PNG icons
└── fonts/                 # Be Vietnam Pro + language-specific web fonts
```

---

## 🔒 Permissions Explained

| Permission | Purpose | Privacy note |
|---|---|---|
| `storage` | Save profiles and preferences locally | 100% local, never synced to cloud |
| `activeTab` | Read / write form fields on the current tab | Only on tabs you explicitly use |
| `scripting` | Inject the floating toolbar | Only user-initiated |
| `clipboardWrite` | Copy profile to clipboard | Only when you click Copy |
| `clipboardRead` | Paste profile from clipboard | Only when you click Paste |
| `contextMenus` | Right-click shortcuts (Smart Fill, Save, Unlock) | No data collection |
| `declarativeNetRequest` | Override request headers for User-Agent switching | Only when UA switcher is active |
| `declarativeNetRequestWithHostAccess` | Apply UA rules across all URLs | Only on demand |
| `downloads` | Save screenshots and HTML exports | Only files you explicitly request |
| `webNavigation` | Detect SPA URL changes to refresh profile list | No browsing history collected |
| `<all_urls>` | Work on any website with a form | Activates only when you use it |

**Security guarantees:**
- ✅ No background scanning — extension is idle until you interact with it
- ✅ No data mining — no browsing history, no page content collected
- ✅ No remote connections — works fully offline
- ✅ No over-reach — every permission is required for a specific stated feature

---

## 🐛 Troubleshooting

**Q: Toolbar not showing?**
A: Refresh the page (`F5`). A few sites block injected scripts — click the extension icon in the address bar to check for blocked-content warnings and grant permission.

**Q: Fonts showing as squares on CJK pages?**
A: TypeLess uses system fonts (Noto Sans CJK) for Chinese / Japanese / Korean to keep the extension size small. Install the relevant Noto Sans font for your OS.

**Q: Fields not filling on a React / Vue / Angular form?**
A: TypeLess dispatches both `Event('input')` and `Event('change')` via the native prototype setter to trigger framework reactivity. If a field still doesn't respond, try re-saving the profile after filling the form once manually.

---

## 📝 Changelog

### Version 1.0.5
#### 🔐 Security Hardening

- 🛡️ **Trusted Types API** (`dom-utils.js`): Registers a `typeless#html` TrustedTypePolicy that acts as the single chokepoint for all `innerHTML` assignments. The policy validates that input is either static internal markup, an extension-origin `<img>` icon, or plain text — everything else throws immediately. In browsers without Trusted Types, the policy falls back gracefully.
- 🏗️ **`DOMBuilder`** (`dom-utils.js`): Imperative DOM builder (`el`, `text`, `icon`, `replace`) builds all user-data-driven elements via `textContent`/`.value`/`.title` — never `innerHTML`. The popup profile list (`loadProfiles`) fully migrated from template-literal `innerHTML` to `DOMBuilder`.
- 🔒 **AES-256-GCM profile encryption** (`crypto-utils.js`): All profile data is encrypted with AES-256-GCM before writing to `chrome.storage.local`. Key derivation uses PBKDF2-SHA256 at 310,000 iterations (OWASP 2024) with a unique random salt per record. The 256-bit device key is generated once, stored locally, and never leaves the device.
- 🔄 **Transparent storage migration**: `StorageManager.getProfiles()` automatically decrypts ciphertext entries and passes through legacy plaintext entries unchanged. Every write path (`saveProfile`, `renameProfile`, `deleteProfile`, `reorderProfiles`) encrypts before committing.
- ⚠️ **Sensitive field warning + exclude toggle**: The Save Profile modal now detects password, PIN, and OTP fields (by `type="password"` and label heuristics). When found, a yellow warning banner appears at the footer of the modal. A checkbox lets the user exclude all sensitive fields from the saved profile in one click — they are never written to storage.

### Version 1.0.4
- 🐛 **Options page import dialog displayed raw HTML tags**: The `notify.imported` i18n string uses `<br>` for line breaks because the in-page toolbar notification renders it via `innerHTML`. When `options.js` passed the same string directly to `alert()` — which only renders plain text — users saw literal `📥 Import done:<br>+3 added<br>↺0 updated<br>⚠️0 skipped` instead of a multi-line message. Fixed: replace `<br>` with `\n` and strip all remaining HTML tags before calling `alert()`.

- ✨ **Focus-only field — mark Focus without saving the value**: Previously the 🎯 Focus button had no effect unless the field's checkbox was ticked. Now any field can be the Focus target regardless of whether its value is saved.
  - ✅ Checked + 🎯 → value **saved** and cursor **focused** after fill *(unchanged)*
  - ❌ Unchecked + 🎯 → value **not saved**, cursor still **jumps** to the field after fill
  - Focus button shows an **orange** border when targeting an unchecked field, **blue** when the field is also saved
  - Toggling the checkbox immediately updates the button border color
  - `focusOnly: true` fields are stored in the profile with only their selector; `fillForm()` skips setting their value and only calls `.focus()`

- 🐛 **`document.body.className` overwritten on every page**: `i18n.init()` called `document.body.className = \`lang-${lang}\`` unconditionally, wiping all existing classes on the host page's `<body>` (e.g. `<body class="dark theme-blue">` became `<body class="lang-vi">`). Fixed: replaced with `classList.add()` / `classList.remove()` — only the extension's own `tl-lang-*` class is touched; all page classes are preserved.
- 🔒 **All CSS classes and element IDs renamed to `tl-` prefix**: Every class used by the extension (`toolbar-btn`, `profile-chip`, `modal-header`, `field-item`, `drag-over`, `icon-btn`…) has been renamed with a `tl-` prefix (`tl-btn`, `tl-chip`, `tl-modal-header`, `tl-field-item`, `tl-drag-over`, `tl-icon-btn`…), including all shadow-internal button IDs. Shadow DOM already isolates the toolbar's CSS from the page, but the prefix eliminates any collision risk when page JavaScript queries the open shadow root and makes TypeLess elements immediately identifiable in DevTools.

- 🐛 **`styles.css` injected globally into every page's light DOM**: The file was listed under `content_scripts → css` in `manifest.json`, causing all 75+ bare class selectors (`.toolbar-btn`, `.profile-chip`, `.modal-header`, `.field-item`…) to be applied to every webpage — potentially breaking page layouts on load with no user interaction. Fixed: removed `styles.css` from `content_scripts → css`; the stylesheet is already loaded inside the toolbar's Shadow DOM where it belongs.
- 🐛 **`margin-bottom: 64px` applied to every page unconditionally on load**: `document.body.style.marginBottom = '64px'` was set immediately when the toolbar was created, before the async check for whether the toolbar was hidden. Every page got a 64 px bottom gap; if the toolbar was hidden the margin persisted until the next interaction. Fixed: check `StorageManager.getToolbarHidden()` first and only apply the margin when the toolbar is actually visible.
- 🐛 **`createToolbar()` race condition — toolbar injected twice**: The `toolbarInjected` guard flag was checked before `await i18n.init()` but set after. Two concurrent calls (e.g. fast SPA navigation + content-script init) both passed the guard, both awaited, and both appended a toolbar to `document.body`. Fixed: `toolbarInjected = true` is now set synchronously right after the guard, before any `await`.
- 🐛 **`loadProfiles()` used exact URL match instead of normalized URL**: Profiles are saved with `StorageManager.normalizeUrl()` (strips trailing slash, query string, common index filenames), but the toolbar filtered by `p.url === window.location.href`. A profile saved at `https://site.com/form/` would not appear on `https://site.com/form`. Fixed: both sides now use `StorageManager.normalizeUrl()`.
- 🐛 **`const` inside `switch/case` without block braces — SyntaxError risk**: The `'radio'`, `'checkbox'`, and `default` branches in `smart-fill.js → generateValue()` declared `const` variables directly in the case body without enclosing `{}`. This violates lexical scoping rules — strict-mode engines may throw `SyntaxError`; others hoist declarations unexpectedly across sibling cases. Fixed: all affected cases now use `{ }` block syntax.

**UI / UX**
- 🎨 **Toolbar redesign — compact layout**: Height reduced from ~70 px to 64 px (30 px header + 34 px chip row). Profile list now renders as a horizontally scrollable row of single-line chips in `[N] Name ×` format, replacing the previous two-line card layout.
- 🔀 **Drag-and-drop profile reorder** across all three surfaces — toolbar chips (left/right), popup list (up/down), options page list (up/down). Order is persisted to storage immediately after each drop.
- 🗑️ **Inline delete in Options → Profiles**: Each card now has an inline `×` delete button. A new **Delete All** button clears all profiles after confirmation.
- 🌐 **Toolbar title updates on language change**: `refreshToolbarUI()` was missing the `.tl-title-text` element update — now all toolbar text switches language together.

**Bug fixes**
- 🐛 Options page not opening on first install — `openOptionsPage()` silently fails in service worker context right after installation; replaced with `chrome.tabs.create({ url: chrome.runtime.getURL('options.html') })`.
- 🐛 False "restricted page" warning shown on the extension's own Options page — `chrome-extension://` was blocked globally; now only other extensions' pages are blocked, not the extension's own.
- 🐛 `file://` pages incorrectly listed as restricted — local HTML files are now supported when file access is granted to the extension.
- 🐛 "Extension context invalidated" console errors after extension reload — `_extAlive()` guard + `try/catch` added so stale content scripts fail silently.
- 🔒 Iframe relay nonce replaced with `event.source` hierarchy validation — the per-frame nonce approach broke all iframe communication because each frame generates its own nonce independently.

**New storage API**
- ➕ `StorageManager.reorderProfiles(orderedIds)` — persist drag-and-drop order by profile ID array
- ➕ `StorageManager.clearAllProfiles()` — wipe all profiles in one call

- 🔒 Background `onMessage` listener validates `sender.id === chrome.runtime.id`, rejecting messages from external pages.
- 🛡️ JSON import rejects files larger than 5 MB to prevent memory exhaustion.
- 🏢 Enterprise `default.json` — profiles are automatically imported on first install.
- 🐛 Removed duplicate `toggleToolbar` handler that used incorrect `style.display` check instead of `classList`.
- 🖼️ Fixed SVG icons not loading in content script context — replaced individual `web_accessible_resources` entries with `icons/*` wildcard.
- 🎨 Fixed Focus button icon rendered as raw HTML text in CSS `content:` property.
- 🔍 Fixed profile search `placeholder` attribute containing a literal `<img>` tag.

- 🔒 XSS hardening: in-page notification changed from `innerHTML` to `textContent` assignment.
- ✏️ Inline profile rename from the popup — pencil button edits the name in place; no need to delete and recreate.

### Version 1.0.3
- 🎛️ **FineUI / ComboBox support**: detects inputs paired with a hidden `$Value` field (FineUI DDL, ExtJS, custom combo-wrap patterns). Saves both display text and the hidden code value; restores both on fill via a three-tier lookup (component API → DOM `<li>` click → direct hidden input assignment).
- 📸 **Screenshot**: toolbar automatically hides before capture and restores after — no toolbar overlap in screenshots.
- 🔒 **Extension context guard** `_extAlive()`: prevents "Extension context invalidated" errors on stale content scripts after extension update.
- 🎯 **Focus After Fill**: `focusAfterFill` field property moves the cursor (with caret at end) to a designated field after applying a profile.
- 📊 **Profile Manager in Settings**: view, search, and edit all profiles and their individual fields from the Options page without opening the popup.
- 📤 **Export Format v1.2**: JSON export includes `_version`, `_exportedAt`, `_count` metadata and supports `displayText` and `focusAfterFill` field properties for full round-trip fidelity.
- 📥 **Improved import result**: reports **added / updated / skipped** counts separately.
- 🔢 **Persistent profile counter**: auto-increment counter for default profile names persisted per calendar day to prevent name collisions across sessions.
- ♻️ **`StorageManager.saveProfile()` API change**: returns `{ success, isNew }` instead of a plain boolean, enabling callers to distinguish new saves from overwrites.

### Version 1.0.2
- 📱 **Mobile Emulation**: accurate Android / iOS simulation — User-Agent string, `navigator.platform`, touch event injection, Client Hints (`Sec-CH-UA-*` headers).
- 📸 **Screenshot**: full-page scroll-and-stitch capture and visible-area capture, both saved directly to Downloads.

### Version 1.0.1
- 🌍 Added 4 languages: Simplified Chinese 🇨🇳, Traditional Chinese 🇹🇼, Japanese 🇯🇵, Korean 🇰🇷.
- 💾 **Save HTML** — export the current page's fully rendered DOM as a local HTML file.
- 🎨 UI updates: button borders, bold text, new icon set.
- 🐛 Fixed font loading for CJK languages; fixed translation key fallback issues.

---

## 👨‍💻 Author
**TRONG.PRO**

## 📄 License
MIT License