Phase 10: Browser Extension — right-click to save products

[dbwg2009]

What

A Chrome/Firefox MV3 browser extension that lets users right-click any product page and save it directly to a Noted wishlist. Authentication uses a long-lived API key rather than the session cookie.

Why

Reduces friction of adding gift ideas discovered while browsing — no need to copy-paste URLs or open the app separately.

Milestone / Phase

Phase 10 — v1.6.0

Branch

phase-10-browser-extension

Tasks

Backend — API Keys

• Add api_keys table (id, user_id, key_hash bcrypt, label, last_used_at, created_at)
• Key format: nk_<uuid> (plain key shown once on creation, only hash stored)
• Run npm run db:push

Backend — REST Endpoint

• POST /api/v1/wishlist-items — accepts Bearer nk_... token, validates against api_keys hash, creates wishlist item
• Response: 201 with new item JSON, 401 on bad key, 422 on validation error
• Add CORS Access-Control-Allow-Origin: * only to /api/v1/ routes (not session routes)

Backend — Server Actions (Settings UI)

• createApiKey (generate, hash, return plain key once)
• revokeApiKey

UI — Settings Page

• /settings → API Keys section: list keys (label + last used), create + revoke controls
• Show plain key once in a copy-to-clipboard modal on creation

Extension (new extension/ directory)

• manifest.json (MV3, Chrome + Firefox compatible)
• Background service worker: registers context menu item "Save to Noted"
• Content script: extracts product data from page (Open Graph tags, JSON-LD, fallback title/URL)
• Popup UI: select person + wishlist, confirm save, show success/error
• Calls POST /api/v1/wishlist-items with stored API key
• Options page: set Noted host URL + API key

Distribution

• npm run build:extension produces .zip for Chrome Web Store sideload + Firefox .xpi
• Attach .zip and .xpi to GitHub Release for v1.6.0

Release

• Update CHANGELOG.md
• Bump package.json to 1.6.0
• Open PR → Development