Chrome Extension Options Page Tutorial
Give users a real settings screen — how to declare, build and persist a Chrome extension options page.
Once your extension has more than two or three settings, the popup gets cramped. The options page is the dedicated settings surface Chrome exposes from the extension's context menu and from chrome://extensions.
Declaring the page
Use "options_ui": { "page": "options.html", "open_in_tab": false } for an embedded dialog inside chrome://extensions, or set open_in_tab to true for a full tab. The legacy "options_page" key still works but gives you no control over presentation.
Building the form
- Render inputs in options.html with labels and sensible defaults.
- Load current values on DOMContentLoaded via chrome.storage.sync.get with a defaults object.
- Save on change or on a Save button click with chrome.storage.sync.set.
- Show a short 'Saved' confirmation so the action feels acknowledged.
- Validate before saving — clamp numbers, trim strings, reject empty required fields.
Keeping surfaces in sync
Listen for chrome.storage.onChanged in the popup and content scripts so a settings change applies immediately without a reload.
Opening it from your own UI
Call chrome.runtime.openOptionsPage() from a link in the popup so users can reach settings without digging through Chrome's menus.