Browser styles

Certain user interface components - browser and page action popups, sidebars, and options pages - are specified by your extension in essentially the same way:

1. create an HTML file defining the structure of the UI element
2. add a manifest.json key (browser_action, page_action, sidebar_action, or options_ui) pointing to that HTML file.

One of the challenges with this approach is styling the element in such a way that it fits in with the browser's own style. To help with this, the manifest.json keys include an extra optional property: "browser_style". If this is included and set to true, then your document will get one or more extra stylesheets that will help make it look consistent with the browser's UI and with other extensions that use the browser_style property.

In Firefox, the stylesheet can be seen at chrome://browser/content/extension.css. The extra stylesheet at chrome://browser/content/extension-mac.css is also included on OS X.

Most styles are automatically applied, but some elements require you to add a class named "browser-style" class to get their styling, as detailed in the table below:

<button class="browser-style">Click me</button>

<select class="browser-style" name="select">
  <option value="value1">Value 1</option>
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

<textarea class="browser-style" >Write here</textarea>

<div class="browser-style">
  <input type="radio" id="op1" name="choices" value="op1">
  <label for="op1">Option 1</label>
  <input type="radio" id="op2" name="choices" value="op2">
  <label for="op2">Option 2</label>
</div>