Certain user interface components - browser and page action popups, sidebars, and options pages - are specified by your extension in essentially the same way:
- create an HTML file defining the structure of the UI element
- add a manifest.json key (
browser_action
,page_action
,sidebar_action
, oroptions_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.
When considering using browser_style: true
, you need to test your extension with various themes (built-in or from AMO) to make sure that the extension UI behaves the way you expect it to.
Warning: When browser_style: true
is included in your web extension's manifest, text selection in your extension's UI is disabled except in input controls. If this will cause a problem, include browser_style:false instead.
Note: Google Chrome and Opera use chrome_style
instead of browser_style
, so if you wish to support them, you need to add both keys.
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 macOS.
Most styles are automatically applied, but some elements require you to add the non-standard browser-style
class to get their styling, as detailed in the table below:
Element | Example |
---|---|
<button> |
<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> |
<textarea class="browser-style">Write here</textarea> |
Parent of an <input> |
<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> |
Note: See bug 1465256 for removal of this unnecessary requirement.