google-chrome-extension Getting started with google-chrome-extension Options Page


Example

Options pages are used to give the user the possibility to maintain settings for your extension.

Version 2

Since Chrome 40 there is the possibility to have the option page as a predefined dialogue at chrome://extensions.

The way to define an option page in the manifest.json is like the following:

"options_ui": {
    "page": "options.html",
    "chrome_style": true
}

This option page will behave as a dialogue, it will open as a popup, where the options.html will be displayed. chrome_style will apply a Chrome stylesheet for style consistency reasons to your options page.

The options will be automatically exposed via the context menu of the extension button or the chrome://extensions page.

extension-button

chrome://extensions

You can also open the options page programmatically, for example from a popup UI:

chrome.runtime.openOptionsPage();

Version 1 (deprecated)

Example definition in manifest.json:

"options_page": "options.html"

It is recommended to use Version 2 since the options_ui behavior will be soon applied to Version 1 options pages.

Storage

Normally the settings need to persist, so using chrome.storage API is recommended. The permissions can be declared like this in the manifest.json:

"permissions": [
   "storage"
]

Official documentation