options\_ui
===========

|  |  |
| --- | --- |
| Type | `Object` |
| Mandatory | No |
| Manifest version | 2 or higher |
| Example | 
```json
"options\_ui": {
  "page": "options/options.html"
}
```
 |

Use the `options_ui` key to define an options page for your extension.

The options page contains settings for the extension. The user can access it from the browser's add-ons manager, and you can open it from within your extension using `runtime.openOptionsPage()`.

You specify `options_ui` as a path to an HTML file packaged with your extension. The HTML file can include CSS and JavaScript files, just like a normal web page. Unlike a normal page, though, the JavaScript can use all the WebExtension APIs that the extension has permissions for. However, it runs in a different scope than your background scripts.

 If you want to **share** data or functions between the JavaScript on your **options page** and your **background script(s)**, you can do so directly by obtaining a reference to the Window of your background scripts by using `extension.getBackgroundPage()`, or a reference to the `Window` of any of the pages running within your extension with `extension.getViews()`. Alternately, you can communicate between the JavaScript for your options page and your background script(s) using `runtime.sendMessage()`, `runtime.onMessage`, or `runtime.connect()`.
 The latter (or `runtime.Port` equivalents) can also be used to share options between your background script(s) and your **content script(s).**

In general, you will want to store options changed on option pages using the storage API to either `storage.sync` (if you want the settings synchronized across all instances of that browser that the user is logged into), or `storage.local` (if the settings are local to the current machine/profile). If you do so and your background script(s) (or content script(s)) need to know about the change, your script(s) might choose to add a listener to `storage.onChanged`.

Syntax
------

The `options_ui` key is an object with the following contents:

| Name | Type | Description |
| --- | --- | --- |
| `browser\_style`Optional
Deprecated
 in Manifest V3. | `Boolean` | Optional, defaulting to:* `true` in Manifest V2 and prior to Firefox 115 in Manifest V3.
* `false` in Manifest V3 from Firefox 115.

Do not set `browser_style` to true: its not support in Manifest V3 from Firefox 118. See Manifest V3 migration for `browser_style`.

 In Firefox, the stylesheet can be seen at
 `chrome://browser/content/extension.css` or
 `chrome://browser/content/extension-mac.css` on macOS. When
 setting dimensions, be aware that this stylesheet sets
 `box-sizing: border-box` (see
 box-sizing).
  |
| `open_in_tab`Optional | `Boolean` | Defaults to `false`.

 If `true`, the options page will open in a normal browser
 tab, rather than being integrated into the browser's add-ons manager.
  |
| `page` | `String` | Mandatory.

 The path to an HTML file containing the specification of your options
 page.


 The path is relative to the location of
 `manifest.json` itself.
  |

Example
-------


```json
"options\_ui": {
  "page": "options/options.html"
}
```

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `options_page` 
Deprecated
* Browser styles
* Options pages