Extension UI Surfaces

Four ways to show UI — popup, side panel, options page, and the toolbar action itself. Click the toolbar icon and the buttons to open each one and feel the difference.

1 · Mock browser

https://example.com
🧩

example.com

The user's current page. Your toolbar icon (🧩) lives top-right. Click it to open the popup.

📐 Side panel

Persists alongside the page as the user browses and navigates. Great for note-takers, chat assistants, and reference tools that should stay open.

chrome-extension://…/options.html✕ close

🛠️ Options page

A full, non-ephemeral page for detailed settings, accounts, import/export.
Theme: dark · Sync: on · Shortcut: Ctrl+Shift+Y
Opened via chrome.runtime.openOptionsPage() or right-click → Options.

2 · Which surface when?

Popup

Quick controls on icon click. Ephemeral — dies on close. Set via action.default_popup.

Side panel

Stays open while browsing. Set via side_panel + sidePanel API. Needs "sidePanel" permission.

Options page

Full settings page. options_page or options_ui. Opened from the popup or extensions menu.

Action

The icon itself: badge text/color, dynamic icon, tooltip — ambient status with no UI to open.