Verified starter

TabFocus Extension

A compact Chrome popup for grouping current tabs, saving a named focus plan, and reopening it later. The preview stays honest about placeholder browser data and minimum tab permissions.

Demo browser data only - no account sync

chrome-extension://tabfocus/popup.html

TabFocus

Save this focus set

Permission needed

Browser permission required

This demo does not pretend to read tabs until permission is granted. A real extension should request the smallest tab permission needed for the popup.

Focus plan name

Not saved in this demo3 tabs

Copy pack

Build from the verified source

Master Prompt and Build Contract for this extension starter. Preserve popup size, tab permission handling, grouped current tabs, and local-only saved plans.

Master Prompt

# Master Build Prompt: TabFocus Extension

Build TabFocus Extension as a compact Chrome extension popup that helps a user save a focus plan from currently open browser tabs and reopen it later. This is not a web dashboard, task manager, team workspace, account product, or analytics tool. It is a narrow extension surface with honest browser-permission behavior and local placeholder storage.

Required facts to preserve:
- The product surface is the Chrome extension popup itself, not a normal website, fake browser scene, or full productivity dashboard.
- The popup shows current tabs grouped by project using placeholder demo tab data until real Chrome tabs API wiring exists.
- User can grant/demo tab access, select individual tabs, name a focus plan, and save selected tabs.
- User can view saved focus plans and trigger an Open saved plan action that would reopen stored tab URLs in production.
- The extension must ask for the minimum tab permission needed and show permission-needed copy before pretending to read tabs.
- Empty/no-tabs, permission-needed, save-validation, save-success, saved-plan, and reopen-queued states must exist.
- Demo data must be labeled as placeholder browser data and local demo storage.
- Do not add accounts, cloud sync, analytics, calendars, team workspaces, broad task boards, LinkedIn/profile workflows, or broad permissions.

UI style and color tokens:
- Overall feel: compact browser utility, crisp, calm, and permission-aware.
- Layout: show only the extension popup as the first-class interactive product surface. A tiny in-popup extension cue such as a chrome-extension URL strip and TF icon is allowed, but do not render a separate fake browser shell, host-page cards, tab-strip scenery, or another product around it. Keep the popup constrained around 390px wide with internal scrolling rather than stretching it into a dashboard.
- Primary navy: #172554 for popup identity, active controls, primary save/open actions, and selected states.
- Preview stage: #EDF2FF / #DDE7FF / #F8FAFF for the quiet background around the popup only.
- Border and divider colors: #C7D2FE, #CBD7F6, #D4DDF8, and #E2E8F0.
- State colors: #FFFBEB / #92400E for permission-needed warnings, #F0FDF4 / #166534 for granted/saved states, and #FEF2F2 / #B91C1C for validation errors.
- Text: #0F172A for primary copy, #475569 / #64748B for muted labels.
- Corners: popup shell and in-popup rows are rounded, compact, and readable, not card-heavy marketing blocks.

Required preview and screens:
- Product-only popup frame: a compact Chrome extension popup with a minimal internal extension cue, not a separate browser mockup or decorative host-page scene.
- Popup header: TabFocus name, compact title, permission status, and a segmented control for Current, Saved, and States.
- Permission behavior: before permission is granted, Current view shows a clear permission-needed state and Save focus plan reports that tab access is required. Grant demo access changes the status to ready and reveals grouped placeholder tabs.
- Current tabs view: group placeholder tabs by project, show host/title rows with checkboxes, maintain selected-tab count, and allow selecting/deselecting tabs.
- Save behavior: focus plan name input plus Save focus plan button. Validate missing permission, no tabs, missing name, and no selected tabs. Successful save adds or updates a saved plan and shows a saved state.
- Saved view: list local saved plans with name, tab count, saved time, sample tab titles, and Open saved plan action. Opening a plan changes visible state to Reopen queued.
- States view: show permission, current-tabs/no-tabs, save state, local storage status, and controls to simulate no-tabs and restore demo tabs.
- Copy surface: the migrated library route shows only Master Prompt and Build Contract tabs. Do not show Step Guide, repo bundle, QA/Fix walkthrough, or a Build Companion region on this route.

Acceptance criteria:
- The first visible product surface is the Chrome extension popup itself, with no fake dashboard, host-page scene, or second product beside it.
- Every visible control changes state: permission grant/clear, view tabs, tab checkboxes, plan-name input, Save focus plan validation/success, Open saved plan, no-tabs simulation, restore tabs, Master Prompt tab, and Build Contract tab.
- The Master Prompt and Build Contract both preserve popup size, minimum permission behavior, grouped current tabs, local saved plans, no-tabs/permission/error/success states, and placeholder data honesty.
- The preview must never imply real browser access, real account data, cloud sync, analytics, team collaboration, or a live backend.

Non-goals:
- No full productivity dashboard, task board, calendar planner, team workspace, account system, cloud sync, backend storage, analytics, AI scoring, or browser history crawler.
- No LinkedIn/profile-specific workflow unless the source brief asks for it.
- No broad host permissions beyond what is needed to read current tabs and reopen saved URLs.
- No fake proof that real tabs were read; demo tab data must remain clearly placeholder.