Web Extension : How do I use "browser_style = true"?

Question

When writing a Firefox web extension it's possible to use a default css for browser or page actions so that they are styled like other browser UI components. It's done by inserting:

"browser_style": true

in the extension manifest. Styles like panel-section-footer-button become available.

My question: How can you know how to use the default styles, there doesn't seem to be an official source or description of them?

---

Related:

• The css in built-in resource chrome://browser/content/extension.css.

• This popup example on Mozilla site, which uses some default styles..

Answer 1

Using "browser_style": true results in the chrome://browser/content/extension.css file being applied to your HTML (on OSX chrome://browser/content/extension-mac.css is applied instead).

Mozilla has a Style Guide which you can peruse to see how various elements and classes are used. The link to this Style Guide is in the browser_style entry within the "Syntax" section of the browser_action documentation page. A similar link is in the same location on the page_action MDN documentation page. Personally, I would find it more appropriate for the information contained in the Style Guide to be hosted directly on MDN rather than on firefoxux.github.io.

If you are just interested in the elements and classes, you can find examples under the Components section.

Note: Under some conditions, Firefox also attempts to apply chrome://browser/content/extension-win-panel.css or chrome://browser/content/extension-mac-panel.css neither of which exist.