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..

Monochrome

The new MDN web docs explain that in more detail. – Calamity

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.

Eudosia

Thanks a lot! It looks like this guide location is a secret transmitted between generations of initiates, impossible to find by your own :-) For others looking for the same information, a good entry point is this one. I appreciate your help. – Monochrome

@mins, I'm glad I was able to help. Yeah, it took me a bit to notice the link to the Style Guide. Until I found it, I had been figuring I was going to be looking through the source code to see what was being done. So, at least we are a bit better off than we would be without it. The information really should be directly on MDN, where we search for primary information related to Firefox add-ons. – Eudosia

@Fully agreed, and... it took time to me also and started thinking I was going to read only generalities, in addition for some reason the table of contents links are sometimes not working! If I could upvote twice, I would! – Monochrome