How do I create native looking popups in a web extension for Firefox?

Viewed 191

I want a native looking popup (menu) in a Firefox web extension. Example:

example


What I have now

Irrelevant parts omitted

manifest.json:

"browser_action": {
  "browser_style": true,  // injects chrome://browser/content/extension.css
  "default_popup": "popup.html"
}

popup.html:

<div class="panel">
    <div class="panel-list">
        <div class="panel-list-item">
            Item 1
        </div>
        <div class="panel-list-item">
            Item 2
        </div>
        <div class="panel-list-item-separator"></div>
        <div class="panel-list-item">
            Item 3
        </div>
    </div>
</div>

This sort of looks like a native menu, but it's not perfect: Menu item hover states have a border and I don't know what html and class names are required for creating a menu item with an icon.

Question

How do I get the result of the example image above without writing my own CSS?

0 Answers
Related