What this prompt does
This prompt designs the full UI for a [browser_target] browser extension called [extension_name] that [extension_purpose], covering every surface at once rather than just the popup. It specs the popup, the options/settings page, an injected content-script overlay, the message-passing architecture between scripts, the action-icon badge system, graceful optional-permission handling, and a first-run onboarding flow. Mapping all surfaces together up front is what keeps an extension from leaking styles or losing state between its parts.
The variables define each surface and how they communicate. [popup_dimensions], [ui_framework], and [popup_content] shape the compact popup with its fixed header and footer, while [settings_sections] organizes the options page and [overlay_type] defines the injected UI on [target_sites]. The overlay uses Shadow DOM to avoid style conflicts and remembers its position per domain. [message_types] defines the typed messages flowing between content script, background service worker, and popup, and [badge_states] plus [optional_permissions] handle status signaling on the action icon and just-in-time permission requests. An [onboarding_steps]-step first-run flow ties it together so new users reach a working setup quickly.
When to use it
- Building a Manifest V3 extension and wanting all UI surfaces designed coherently.
- Injecting a content-script overlay on
[target_sites]without clashing with host-page CSS. - Defining typed message passing between content script, service worker, and popup up front.
- Designing a badge system that reflects
[badge_states]on the action icon. - Requesting
[optional_permissions]only when a feature needs them, with a clear explanation. - Creating a first-run onboarding flow that walks users through setup and permissions.
Example output
You get a multi-surface UI spec: a [popup_dimensions] popup built in [ui_framework] showing [popup_content] with fixed header and footer; an options page split into [settings_sections] using chrome.storage.sync with debounced save and import/export; a Shadow-DOM content-script [overlay_type] with drag-to-reposition and per-domain memory; a message-passing layer defining [message_types] with TypeScript interfaces; badge logic for [badge_states]; just-in-time chrome.permissions.request flows for [optional_permissions]; and an onboarding flow with [onboarding_steps] steps.
Pro tips
- Isolate the content-script overlay in Shadow DOM; without it, the host page's CSS will distort
[overlay_type]unpredictably. - Define
[message_types]as TypeScript interfaces early; loose message shapes are where extension bugs hide. - Use
chrome.storage.syncfor small synced settings andchrome.storage.localfor large data; syncing big blobs hits quota limits and fails silently across devices. - Request
[optional_permissions]only at the moment a feature needs them, with a clear dialog, to keep install-time trust high. - Keep the popup under your
[load_time]budget by choosing a light[ui_framework]; heavy bundles make the popup feel sluggish. - Remember the service worker is ephemeral in MV3; persist state to storage rather than relying on in-memory variables between events, since the worker can be torn down at any time.
