Estilos de navegador
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.
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 the non-standard browser-style
class to get their styling since Firefox 55, as detailed in the table below:
Elemento | Exemplo |
---|---|
<button> |
|
|
|
<textarea> |
|
Parent of an <input> |
|
Componentes de Painel do Firefox
Non-Standard
This feature is non-standard and only works in Firefox.
The chrome://browser/content/extension.css
stylesheet also contains the styles for the Firefox Panel Components.
The legacy Firefox Style Guide documents proper usage.
Elemento | Exemplo |
---|---|
Cabeçalho |
|
Rodapé |
|
Separadores |
|
Form |
|
Menu |
|
Exemplo
HTML
<header class="panel-section panel-section-header">
<div class="icon-section-header"><!-- An image goes here. --></div>
<div class="text-section-header">Header</div>
</header>
<div class="panel-section panel-section-list">
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut">Ctrl-L</div>
</div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-section-separator"></div>
<div class="panel-list-item disabled">
<div class="icon"></div>
<div class="text">Disabled List Item</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-section-separator"></div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut"></div>
</div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">List Item</div>
<div class="text-shortcut"></div>
</div>
</div>
<footer class="panel-section panel-section-footer">
<button class="panel-section-footer-button">Cancel</button>
<div class="panel-section-footer-separator"></div>
<button class="panel-section-footer-button default">Confirm</button>
</footer>