docs: add credential capture implementation plan
5 tasks: types/messages, service worker handlers, capture content script with bar/toast prompts, settings popup view, and integration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
adlee-was-taken
845
docs/superpowers/plans/2026-04-12-idfoto-credential-capture.md
Normal file
845
docs/superpowers/plans/2026-04-12-idfoto-credential-capture.md
Normal file
@@ -0,0 +1,845 @@
|
||||
# idfoto Credential Capture Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Add experimental credential capture that detects login form submissions and prompts the user to save or update credentials, with configurable bar/toast prompt style and per-site blacklist.
|
||||
|
||||
**Architecture:** Content script hooks form submissions, captures credentials, asks the service worker to check against the manifest, then injects a prompt (bar or toast) into the page. New settings view in the popup for configuration. Feature is off by default.
|
||||
|
||||
**Tech Stack:** TypeScript, Chrome extension APIs, DOM injection
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-04-12-idfoto-credential-capture-design.md`
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
### New files
|
||||
|
||||
```
|
||||
extension/src/content/capture.ts # Form submission detection + prompt injection
|
||||
extension/src/popup/components/settings.ts # Settings view
|
||||
```
|
||||
|
||||
### Modified files
|
||||
|
||||
```
|
||||
extension/src/shared/types.ts # Add IdfotoSettings interface
|
||||
extension/src/shared/messages.ts # Add new message types
|
||||
extension/src/service-worker/index.ts # Handle new messages
|
||||
extension/src/content/detector.ts # Import and init capture
|
||||
extension/src/popup/popup.ts # Add 'settings' view
|
||||
extension/src/popup/components/unlock.ts # Wire settings button to settings view
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 1: Add Types and Message Definitions
|
||||
|
||||
**Files:**
|
||||
- Modify: `extension/src/shared/types.ts`
|
||||
- Modify: `extension/src/shared/messages.ts`
|
||||
|
||||
- [ ] **Step 1: Add IdfotoSettings to types.ts**
|
||||
|
||||
Add at the end of `extension/src/shared/types.ts`:
|
||||
|
||||
```typescript
|
||||
export interface IdfotoSettings {
|
||||
captureEnabled: boolean;
|
||||
captureStyle: 'bar' | 'toast';
|
||||
}
|
||||
|
||||
export const DEFAULT_SETTINGS: IdfotoSettings = {
|
||||
captureEnabled: false,
|
||||
captureStyle: 'bar',
|
||||
};
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add new message types to messages.ts**
|
||||
|
||||
Add these to the `Request` union in `extension/src/shared/messages.ts`:
|
||||
|
||||
```typescript
|
||||
| { type: 'check_credential'; url: string; username: string; password: string }
|
||||
| { type: 'blacklist_site'; hostname: string }
|
||||
| { type: 'get_settings' }
|
||||
| { type: 'update_settings'; settings: Partial<import('./types').IdfotoSettings> }
|
||||
| { type: 'get_blacklist' }
|
||||
| { type: 'remove_blacklist'; hostname: string }
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add extension/src/shared/types.ts extension/src/shared/messages.ts
|
||||
git commit -m "feat: add settings and credential capture message types"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 2: Service Worker Message Handlers
|
||||
|
||||
**Files:**
|
||||
- Modify: `extension/src/service-worker/index.ts`
|
||||
|
||||
- [ ] **Step 1: Add settings and blacklist storage helpers**
|
||||
|
||||
Add these helper functions to `extension/src/service-worker/index.ts`, after the existing storage helpers:
|
||||
|
||||
```typescript
|
||||
import type { IdfotoSettings } from '../shared/types';
|
||||
import { DEFAULT_SETTINGS } from '../shared/types';
|
||||
|
||||
async function loadSettings(): Promise<IdfotoSettings> {
|
||||
const data = await chrome.storage.local.get(['settings']);
|
||||
if (!data.settings) return { ...DEFAULT_SETTINGS };
|
||||
return { ...DEFAULT_SETTINGS, ...data.settings };
|
||||
}
|
||||
|
||||
async function saveSettings(settings: IdfotoSettings): Promise<void> {
|
||||
await chrome.storage.local.set({ settings });
|
||||
}
|
||||
|
||||
async function loadBlacklist(): Promise<string[]> {
|
||||
const data = await chrome.storage.local.get(['captureBlacklist']);
|
||||
return data.captureBlacklist ?? [];
|
||||
}
|
||||
|
||||
async function saveBlacklist(list: string[]): Promise<void> {
|
||||
await chrome.storage.local.set({ captureBlacklist: list });
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add message handlers**
|
||||
|
||||
Add these cases to the `switch` statement in the message handler, before the `default` case:
|
||||
|
||||
```typescript
|
||||
case 'get_settings': {
|
||||
const settings = await loadSettings();
|
||||
return { ok: true, data: settings };
|
||||
}
|
||||
|
||||
case 'update_settings': {
|
||||
const current = await loadSettings();
|
||||
const updated = { ...current, ...req.settings };
|
||||
await saveSettings(updated);
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
case 'get_blacklist': {
|
||||
const list = await loadBlacklist();
|
||||
return { ok: true, data: { blacklist: list } };
|
||||
}
|
||||
|
||||
case 'remove_blacklist': {
|
||||
const list = await loadBlacklist();
|
||||
await saveBlacklist(list.filter(h => h !== req.hostname));
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
case 'blacklist_site': {
|
||||
const list = await loadBlacklist();
|
||||
if (!list.includes(req.hostname)) {
|
||||
list.push(req.hostname);
|
||||
await saveBlacklist(list);
|
||||
}
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
case 'check_credential': {
|
||||
// If vault is locked, skip
|
||||
if (!masterKey || !gitHost || !manifest) {
|
||||
return { ok: true, data: { action: 'skip' } };
|
||||
}
|
||||
|
||||
// Check settings
|
||||
const settings = await loadSettings();
|
||||
if (!settings.captureEnabled) {
|
||||
return { ok: true, data: { action: 'skip' } };
|
||||
}
|
||||
|
||||
// Check blacklist
|
||||
let hostname: string;
|
||||
try {
|
||||
hostname = new URL(req.url).hostname;
|
||||
} catch {
|
||||
return { ok: true, data: { action: 'skip' } };
|
||||
}
|
||||
|
||||
const blacklist = await loadBlacklist();
|
||||
if (blacklist.includes(hostname)) {
|
||||
return { ok: true, data: { action: 'skip' } };
|
||||
}
|
||||
|
||||
// Find matching entries by hostname
|
||||
const matches = vault.findByUrl(manifest, req.url);
|
||||
if (matches.length === 0) {
|
||||
return { ok: true, data: { action: 'save' } };
|
||||
}
|
||||
|
||||
// Check if any match has the same username
|
||||
for (const [id, entry] of matches) {
|
||||
if (entry.username === req.username) {
|
||||
// Same username — check if password changed
|
||||
const fullEntry = await vault.fetchAndDecryptEntry(gitHost, masterKey, id);
|
||||
if (fullEntry.password === req.password) {
|
||||
// Exact match, already saved
|
||||
return { ok: true, data: { action: 'skip' } };
|
||||
} else {
|
||||
// Password changed
|
||||
return { ok: true, data: { action: 'update', entryId: id, entryName: entry.name } };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Different username on same site — new account
|
||||
return { ok: true, data: { action: 'save' } };
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Verify build**
|
||||
|
||||
```bash
|
||||
cd extension && bun run build
|
||||
```
|
||||
|
||||
Expected: Compiles with no errors.
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add extension/src/service-worker/index.ts
|
||||
git commit -m "feat: add settings, blacklist, and credential check handlers"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 3: Credential Capture Content Script
|
||||
|
||||
**Files:**
|
||||
- Create: `extension/src/content/capture.ts`
|
||||
- Modify: `extension/src/content/detector.ts`
|
||||
|
||||
- [ ] **Step 1: Create capture.ts**
|
||||
|
||||
Create `extension/src/content/capture.ts`:
|
||||
|
||||
```typescript
|
||||
/// Credential capture — detects login form submissions and prompts
|
||||
/// the user to save or update credentials in the vault.
|
||||
///
|
||||
/// This module hooks form submit events and submit button clicks,
|
||||
/// captures username + password, asks the service worker whether to
|
||||
/// save/update/skip, and injects a prompt (bar or toast) into the page.
|
||||
|
||||
// --- Types ---
|
||||
|
||||
interface CaptureResult {
|
||||
action: 'save' | 'update' | 'skip';
|
||||
entryId?: string;
|
||||
entryName?: string;
|
||||
}
|
||||
|
||||
type PromptStyle = 'bar' | 'toast';
|
||||
|
||||
// Track forms we've already hooked to avoid duplicates.
|
||||
const hookedForms = new WeakSet<HTMLFormElement>();
|
||||
const hookedButtons = new WeakSet<HTMLElement>();
|
||||
|
||||
// --- Form Submission Detection ---
|
||||
|
||||
/// Find the username field associated with a password field.
|
||||
/// Same priority as detector.ts but inlined to avoid circular deps.
|
||||
function findUsername(pwField: HTMLInputElement): string {
|
||||
const form = pwField.closest('form');
|
||||
const scope = form ?? document;
|
||||
const inputs = scope.querySelectorAll<HTMLInputElement>('input');
|
||||
|
||||
// autocomplete="username"
|
||||
for (const input of inputs) {
|
||||
if (input !== pwField && input.autocomplete === 'username' && input.value) return input.value;
|
||||
}
|
||||
// autocomplete="email"
|
||||
for (const input of inputs) {
|
||||
if (input !== pwField && input.autocomplete === 'email' && input.value) return input.value;
|
||||
}
|
||||
// type="email"
|
||||
for (const input of inputs) {
|
||||
if (input !== pwField && input.type === 'email' && input.value) return input.value;
|
||||
}
|
||||
// name/id pattern
|
||||
const pattern = /user|email|login|account/i;
|
||||
for (const input of inputs) {
|
||||
if (input === pwField || input.type === 'hidden' || input.type === 'password') continue;
|
||||
if ((pattern.test(input.name) || pattern.test(input.id)) && input.value) return input.value;
|
||||
}
|
||||
// Nearest preceding visible text input
|
||||
const allInputs = Array.from(inputs);
|
||||
const pwIndex = allInputs.indexOf(pwField);
|
||||
for (let i = pwIndex - 1; i >= 0; i--) {
|
||||
const input = allInputs[i];
|
||||
if (input.type === 'hidden' || input.type === 'password' || input.type === 'submit') continue;
|
||||
if (input.offsetWidth > 0 && input.offsetHeight > 0 && input.value) return input.value;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/// Capture credentials from a form that contains a password field.
|
||||
function captureFromForm(form: HTMLFormElement): { username: string; password: string } | null {
|
||||
const pwField = form.querySelector<HTMLInputElement>('input[type="password"]');
|
||||
if (!pwField || !pwField.value) return null;
|
||||
|
||||
const username = findUsername(pwField);
|
||||
return { username, password: pwField.value };
|
||||
}
|
||||
|
||||
/// Handle a form submission — capture credentials and check with service worker.
|
||||
async function handleSubmission(form: HTMLFormElement): Promise<void> {
|
||||
const creds = captureFromForm(form);
|
||||
if (!creds || !creds.password) return;
|
||||
|
||||
const url = window.location.href;
|
||||
|
||||
try {
|
||||
const response = await chrome.runtime.sendMessage({
|
||||
type: 'check_credential',
|
||||
url,
|
||||
username: creds.username,
|
||||
password: creds.password,
|
||||
});
|
||||
|
||||
if (!response?.ok) return;
|
||||
const result = response.data as CaptureResult;
|
||||
if (result.action === 'skip') return;
|
||||
|
||||
// Get the prompt style from settings
|
||||
const settingsResp = await chrome.runtime.sendMessage({ type: 'get_settings' });
|
||||
const style: PromptStyle = settingsResp?.ok ? (settingsResp.data as { captureStyle: PromptStyle }).captureStyle : 'bar';
|
||||
|
||||
showPrompt(style, result, url, creds.username, creds.password);
|
||||
} catch {
|
||||
// Extension not available or vault locked — silently skip
|
||||
}
|
||||
}
|
||||
|
||||
/// Hook form submit events and submit button clicks.
|
||||
export function hookForms(): void {
|
||||
const forms = document.querySelectorAll<HTMLFormElement>('form');
|
||||
|
||||
for (const form of forms) {
|
||||
// Only hook forms that contain a password field.
|
||||
if (!form.querySelector('input[type="password"]')) continue;
|
||||
if (hookedForms.has(form)) continue;
|
||||
hookedForms.add(form);
|
||||
|
||||
// Hook form submit event.
|
||||
form.addEventListener('submit', () => {
|
||||
handleSubmission(form);
|
||||
});
|
||||
|
||||
// Hook submit button clicks (some sites don't use form submit).
|
||||
const submitBtns = form.querySelectorAll<HTMLElement>(
|
||||
'button[type="submit"], input[type="submit"], button:not([type])'
|
||||
);
|
||||
for (const btn of submitBtns) {
|
||||
if (hookedButtons.has(btn)) continue;
|
||||
hookedButtons.add(btn);
|
||||
btn.addEventListener('click', () => {
|
||||
handleSubmission(form);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Prompt UI ---
|
||||
|
||||
/// Remove any existing idfoto prompt from the page.
|
||||
function removePrompt(): void {
|
||||
document.getElementById('idfoto-capture-prompt')?.remove();
|
||||
}
|
||||
|
||||
/// Show a save/update prompt.
|
||||
function showPrompt(
|
||||
style: PromptStyle,
|
||||
result: CaptureResult,
|
||||
url: string,
|
||||
username: string,
|
||||
password: string,
|
||||
): void {
|
||||
removePrompt();
|
||||
|
||||
let hostname: string;
|
||||
try {
|
||||
hostname = new URL(url).hostname;
|
||||
} catch {
|
||||
hostname = url;
|
||||
}
|
||||
|
||||
const isUpdate = result.action === 'update';
|
||||
const actionLabel = isUpdate ? 'Update' : 'Save';
|
||||
const message = isUpdate
|
||||
? `Update password for ${hostname}?`
|
||||
: `Save login for ${hostname}?`;
|
||||
|
||||
const container = document.createElement('div');
|
||||
container.id = 'idfoto-capture-prompt';
|
||||
|
||||
// Common styles
|
||||
const baseStyles = `
|
||||
font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
|
||||
font-size: 13px;
|
||||
color: #c9d1d9;
|
||||
background: #161b22;
|
||||
border: 1px solid #30363d;
|
||||
z-index: 2147483647;
|
||||
box-sizing: border-box;
|
||||
`;
|
||||
|
||||
if (style === 'bar') {
|
||||
container.style.cssText = `
|
||||
${baseStyles}
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 10px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.4);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.2s ease-out;
|
||||
`;
|
||||
// Slide in after a frame
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
container.style.transform = 'translateY(0)';
|
||||
});
|
||||
});
|
||||
} else {
|
||||
container.style.cssText = `
|
||||
${baseStyles}
|
||||
position: fixed;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
min-width: 260px;
|
||||
max-width: 340px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-out;
|
||||
`;
|
||||
requestAnimationFrame(() => {
|
||||
container.style.opacity = '1';
|
||||
});
|
||||
|
||||
// Auto-dismiss after 15 seconds.
|
||||
setTimeout(() => {
|
||||
if (container.isConnected) {
|
||||
container.style.opacity = '0';
|
||||
setTimeout(removePrompt, 200);
|
||||
}
|
||||
}, 15000);
|
||||
}
|
||||
|
||||
// Brand label
|
||||
const brand = document.createElement('span');
|
||||
brand.textContent = 'idfoto';
|
||||
brand.style.cssText = 'color: #58a6ff; font-weight: normal; letter-spacing: 1px;';
|
||||
|
||||
// Message text
|
||||
const msg = document.createElement('span');
|
||||
msg.style.cssText = 'flex: 1;';
|
||||
if (style === 'bar') {
|
||||
msg.textContent = `${message} ${username ? `(${username})` : ''}`;
|
||||
} else {
|
||||
msg.innerHTML = `${escapeHtml(message)}<br><span style="color:#8b949e;font-size:11px;">${escapeHtml(username)}</span>`;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
const btnStyle = `
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
`;
|
||||
|
||||
const saveBtn = document.createElement('button');
|
||||
saveBtn.textContent = actionLabel;
|
||||
saveBtn.style.cssText = `${btnStyle} background: #1f6feb; color: #fff;`;
|
||||
|
||||
const neverBtn = document.createElement('button');
|
||||
neverBtn.textContent = 'Never';
|
||||
neverBtn.style.cssText = `${btnStyle} background: #21262d; color: #8b949e; border: 1px solid #30363d;`;
|
||||
|
||||
const closeBtn = document.createElement('button');
|
||||
closeBtn.textContent = '✕';
|
||||
closeBtn.style.cssText = `${btnStyle} background: transparent; color: #484f58; font-size: 14px; padding: 4px 8px;`;
|
||||
|
||||
// Event handlers
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = '...';
|
||||
|
||||
try {
|
||||
if (isUpdate && result.entryId) {
|
||||
// Fetch existing entry, update password
|
||||
const getResp = await chrome.runtime.sendMessage({ type: 'get_entry', id: result.entryId });
|
||||
if (getResp?.ok) {
|
||||
const existing = (getResp.data as { entry: Record<string, unknown> }).entry;
|
||||
await chrome.runtime.sendMessage({
|
||||
type: 'update_entry',
|
||||
id: result.entryId,
|
||||
entry: { ...existing, password },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
await chrome.runtime.sendMessage({
|
||||
type: 'add_entry',
|
||||
entry: {
|
||||
name: hostname,
|
||||
url,
|
||||
username: username || undefined,
|
||||
password,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
},
|
||||
});
|
||||
}
|
||||
// Brief confirmation
|
||||
msg.textContent = isUpdate ? '✓ Updated' : '✓ Saved';
|
||||
saveBtn.remove();
|
||||
neverBtn.remove();
|
||||
setTimeout(removePrompt, 1500);
|
||||
} catch {
|
||||
saveBtn.textContent = 'Error';
|
||||
setTimeout(removePrompt, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
neverBtn.addEventListener('click', async () => {
|
||||
await chrome.runtime.sendMessage({ type: 'blacklist_site', hostname });
|
||||
removePrompt();
|
||||
});
|
||||
|
||||
closeBtn.addEventListener('click', removePrompt);
|
||||
|
||||
// Assemble
|
||||
if (style === 'bar') {
|
||||
container.appendChild(brand);
|
||||
container.appendChild(msg);
|
||||
container.appendChild(saveBtn);
|
||||
container.appendChild(neverBtn);
|
||||
container.appendChild(closeBtn);
|
||||
} else {
|
||||
const header = document.createElement('div');
|
||||
header.style.cssText = 'display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;';
|
||||
header.appendChild(brand);
|
||||
header.appendChild(closeBtn);
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.style.cssText = 'margin-bottom:10px;';
|
||||
body.appendChild(msg);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
actions.style.cssText = 'display:flex; gap:8px; justify-content:flex-end;';
|
||||
actions.appendChild(neverBtn);
|
||||
actions.appendChild(saveBtn);
|
||||
|
||||
container.appendChild(header);
|
||||
container.appendChild(body);
|
||||
container.appendChild(actions);
|
||||
}
|
||||
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
function escapeHtml(s: string): string {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = s;
|
||||
return div.innerHTML;
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Import and init capture in detector.ts**
|
||||
|
||||
Add to the top of `extension/src/content/detector.ts`, after the existing imports:
|
||||
|
||||
```typescript
|
||||
import { hookForms } from './capture';
|
||||
```
|
||||
|
||||
Add `hookForms()` calls in two places:
|
||||
|
||||
After the `scan()` call near the bottom (line ~91):
|
||||
```typescript
|
||||
// Initial scan.
|
||||
scan();
|
||||
hookForms();
|
||||
```
|
||||
|
||||
Inside the MutationObserver callback (line ~95):
|
||||
```typescript
|
||||
const observer = new MutationObserver(() => {
|
||||
scan();
|
||||
hookForms();
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Build and verify**
|
||||
|
||||
```bash
|
||||
cd extension && bun run build
|
||||
```
|
||||
|
||||
Expected: Compiles with no errors.
|
||||
|
||||
- [ ] **Step 4: Commit**
|
||||
|
||||
```bash
|
||||
git add extension/src/content/capture.ts extension/src/content/detector.ts
|
||||
git commit -m "feat: add credential capture with bar/toast prompts"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 4: Settings View in Popup
|
||||
|
||||
**Files:**
|
||||
- Create: `extension/src/popup/components/settings.ts`
|
||||
- Modify: `extension/src/popup/popup.ts`
|
||||
- Modify: `extension/src/popup/components/unlock.ts`
|
||||
|
||||
- [ ] **Step 1: Create settings.ts**
|
||||
|
||||
Create `extension/src/popup/components/settings.ts`:
|
||||
|
||||
```typescript
|
||||
/// Settings view — configure credential capture and manage blacklist.
|
||||
|
||||
import { setState, sendMessage, navigate, escapeHtml } from '../popup';
|
||||
import type { IdfotoSettings } from '../../shared/types';
|
||||
|
||||
export async function renderSettings(app: HTMLElement): Promise<void> {
|
||||
// Load current settings and blacklist in parallel.
|
||||
const [settingsResp, blacklistResp] = await Promise.all([
|
||||
sendMessage({ type: 'get_settings' }),
|
||||
sendMessage({ type: 'get_blacklist' }),
|
||||
]);
|
||||
|
||||
const settings: IdfotoSettings = settingsResp.ok
|
||||
? settingsResp.data as IdfotoSettings
|
||||
: { captureEnabled: false, captureStyle: 'bar' };
|
||||
|
||||
const blacklist: string[] = blacklistResp.ok
|
||||
? (blacklistResp.data as { blacklist: string[] }).blacklist
|
||||
: [];
|
||||
|
||||
app.innerHTML = `
|
||||
<div class="pad" style="padding-top:12px;">
|
||||
<div style="margin-bottom:16px;">
|
||||
<span class="secondary" style="cursor:pointer;font-size:11px;" id="back-btn">← back</span>
|
||||
</div>
|
||||
|
||||
<div class="brand" style="margin-bottom:16px;">settings</div>
|
||||
|
||||
<div class="form-group" style="margin-bottom:16px;">
|
||||
<div class="label">CREDENTIAL CAPTURE <span class="muted">(experimental)</span></div>
|
||||
<div style="display:flex;align-items:center;gap:8px;margin-top:6px;">
|
||||
<label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;">
|
||||
<input type="checkbox" id="capture-toggle" ${settings.captureEnabled ? 'checked' : ''}>
|
||||
auto-detect logins
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-bottom:16px;">
|
||||
<div class="label">PROMPT STYLE</div>
|
||||
<div style="display:flex;gap:8px;margin-top:6px;">
|
||||
<button class="group-tab ${settings.captureStyle === 'bar' ? 'active' : ''}" data-style="bar">bar</button>
|
||||
<button class="group-tab ${settings.captureStyle === 'toast' ? 'active' : ''}" data-style="toast">toast</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${blacklist.length > 0 ? `
|
||||
<div class="form-group">
|
||||
<div class="label">BLACKLISTED SITES</div>
|
||||
<div style="margin-top:6px;">
|
||||
${blacklist.map(h => `
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:11px;">
|
||||
<span class="secondary">${escapeHtml(h)}</span>
|
||||
<span class="muted" style="cursor:pointer;" data-remove-host="${escapeHtml(h)}">✕</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// --- Event listeners ---
|
||||
|
||||
document.getElementById('back-btn')?.addEventListener('click', () => {
|
||||
navigate('locked');
|
||||
});
|
||||
|
||||
document.getElementById('capture-toggle')?.addEventListener('change', async (e) => {
|
||||
const enabled = (e.target as HTMLInputElement).checked;
|
||||
await sendMessage({ type: 'update_settings', settings: { captureEnabled: enabled } });
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-style]').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const style = (btn as HTMLElement).dataset.style as 'bar' | 'toast';
|
||||
await sendMessage({ type: 'update_settings', settings: { captureStyle: style } });
|
||||
// Re-render to update active state.
|
||||
renderSettings(app);
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-remove-host]').forEach(btn => {
|
||||
btn.addEventListener('click', async () => {
|
||||
const hostname = (btn as HTMLElement).dataset.removeHost!;
|
||||
await sendMessage({ type: 'remove_blacklist', hostname });
|
||||
// Re-render to remove from list.
|
||||
renderSettings(app);
|
||||
});
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Add 'settings' view to popup.ts**
|
||||
|
||||
In `extension/src/popup/popup.ts`:
|
||||
|
||||
Add the import at the top with the other component imports:
|
||||
|
||||
```typescript
|
||||
import { renderSettings } from './components/settings';
|
||||
```
|
||||
|
||||
Update the `View` type:
|
||||
|
||||
```typescript
|
||||
export type View = 'setup' | 'locked' | 'list' | 'detail' | 'add' | 'edit' | 'settings';
|
||||
```
|
||||
|
||||
Add the case to the `render()` switch:
|
||||
|
||||
```typescript
|
||||
case 'settings':
|
||||
renderSettings(app);
|
||||
break;
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Wire settings button in unlock.ts**
|
||||
|
||||
In `extension/src/popup/components/unlock.ts`, change the settings button handler (line ~55):
|
||||
|
||||
From:
|
||||
```typescript
|
||||
settingsBtn?.addEventListener('click', () => navigate('setup'));
|
||||
```
|
||||
|
||||
To:
|
||||
```typescript
|
||||
settingsBtn?.addEventListener('click', () => navigate('settings'));
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Build and verify**
|
||||
|
||||
```bash
|
||||
cd extension && bun run build
|
||||
```
|
||||
|
||||
Expected: Compiles with no errors.
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add extension/src/popup/components/settings.ts extension/src/popup/popup.ts extension/src/popup/components/unlock.ts
|
||||
git commit -m "feat: add settings view with capture toggle and blacklist management"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task 5: Build and Manual Test
|
||||
|
||||
**Files:** None (integration testing)
|
||||
|
||||
- [ ] **Step 1: Full build**
|
||||
|
||||
```bash
|
||||
cd extension && bun run build
|
||||
```
|
||||
|
||||
Expected: Compiles with no errors (warnings about WASM size are fine).
|
||||
|
||||
- [ ] **Step 2: Reload extension in Chrome**
|
||||
|
||||
Open `chrome://extensions/`, reload the unpacked extension.
|
||||
|
||||
- [ ] **Step 3: Test settings view**
|
||||
|
||||
1. Open popup → click "settings" from unlock screen
|
||||
2. Verify toggle for "auto-detect logins" (should be off by default)
|
||||
3. Toggle it on
|
||||
4. Verify bar/toast style selector works
|
||||
5. Go back to unlock screen
|
||||
|
||||
- [ ] **Step 4: Test credential capture (bar mode)**
|
||||
|
||||
1. Enable capture in settings, set style to "bar"
|
||||
2. Unlock the vault
|
||||
3. Navigate to a login page (e.g. GitHub)
|
||||
4. Enter credentials and submit the form
|
||||
5. Verify: notification bar slides down from top with "Save login for github.com?"
|
||||
6. Click "Save" — verify entry appears in vault
|
||||
7. Submit same credentials again — verify no prompt (already saved)
|
||||
8. Change password and submit — verify "Update password?" prompt
|
||||
|
||||
- [ ] **Step 5: Test credential capture (toast mode)**
|
||||
|
||||
1. Change style to "toast" in settings
|
||||
2. Submit a login form on a new site
|
||||
3. Verify: floating toast appears in bottom-right
|
||||
4. Verify: auto-dismisses after ~15 seconds if ignored
|
||||
|
||||
- [ ] **Step 6: Test blacklist**
|
||||
|
||||
1. Click "Never" on a capture prompt
|
||||
2. Submit login on same site again — verify no prompt
|
||||
3. Open settings — verify site appears in blacklist
|
||||
4. Remove site from blacklist — verify it's gone
|
||||
|
||||
- [ ] **Step 7: Fix any issues found**
|
||||
|
||||
- [ ] **Step 8: Final commit**
|
||||
|
||||
```bash
|
||||
git add -A
|
||||
git commit -m "feat: complete credential capture feature"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Task Summary
|
||||
|
||||
| Task | Description | Dependencies |
|
||||
|------|-------------|--------------|
|
||||
| 1 | Add types and message definitions | None |
|
||||
| 2 | Service worker message handlers | Task 1 |
|
||||
| 3 | Capture content script + detector integration | Task 1 |
|
||||
| 4 | Settings view in popup | Task 1 |
|
||||
| 5 | Build and manual test | All |
|
||||
|
||||
Tasks 2, 3, and 4 can run in parallel after Task 1. Task 5 is final integration.
|
||||
Reference in New Issue
Block a user