Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.
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> |
<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> |
Compatibilidade de navegador
No compatibility data found. Please contribute data for "webextensions.browser_style" (depth: 1) to the MDN compatibility data repository.
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 |
<header class="panel-section panel-section-header"> <div class="icon-section-header"><img src="image.svg"/></div> <div class="text-section-header">Header</div> </header> |
Rodapé |
<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> |
Separadores |
<div class="panel-section panel-section-tabs"> <button class="panel-section-tabs-button selected">Tab</button> <div class="panel-section-tabs-separator"></div> <button class="panel-section-tabs-button">Tab</button> <div class="panel-section-tabs-separator"></div> <button class="panel-section-tabs-button">Tab</button> </div> |
Form |
<div class="panel-section panel-section-formElements"> <div class="panel-formElements-item"> <label for="name01">Label:</label> <input type="text" value="Name" id="name01" /> </div> <div class="panel-formElements-item"> <label for="picker01">Label:</label> <select id="picker01"> <option value="value1" selected="true">Dropdown</option> <option value="value2">List Item</option> <option value="value3">List Item</option> </select> </div> <div class="panel-formElements-item"> <label for="placeholder01">Label:</label> <input type="text" placeholder="Placeholder" id="placeholder01" /> <button name="expander" class="expander"></button> </div> </div> |
Menu |
<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> |
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>
CSS
/* Global */ html, body { background: white; box-sizing: border-box; color: #222426; cursor: default; display: flex; flex-direction: column; font: caption; margin: 0; padding: 0; -moz-user-select: none; } body * { box-sizing: border-box; text-align: start; } button.panel-section-footer-button, button.panel-section-tabs-button { color: inherit; background-color: unset; font: inherit; text-shadow: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; } /* Panel Section */ .panel-section { display: flex; flex-direction: row; } .panel-section-separator { background-color: rgba(0, 0, 0, 0.15); min-height: 1px; } /* Panel Section - Header */ .panel-section-header { border-bottom: 1px solid rgba(0, 0, 0, 0.15); padding: 16px; } .panel-section-header > .icon-section-header { background-position: center center; background-repeat: no-repeat; height: 32px; margin-right: 16px; position: relative; width: 32px; } .panel-section-header > .text-section-header { align-self: center; font-size: 1.385em; font-weight: lighter; } /* Panel Section - List */ .panel-section-list { flex-direction: column; padding: 4px 0; } .panel-list-item { align-items: center; display: flex; flex-direction: row; height: 24px; padding: 0 16px; } .panel-list-item:not(.disabled):hover { background-color: rgba(0, 0, 0, 0.06); border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1); } .panel-list-item:not(.disabled):hover:active { background-color: rgba(0, 0, 0, 0.1); } .panel-list-item.disabled { color: #999; } .panel-list-item > .icon { flex-grow: 0; flex-shrink: 0; } .panel-list-item > .text { flex-grow: 10; } .panel-list-item > .text-shortcut { color: #808080; font-family: "Lucida Grande", caption; font-size: .847em; justify-content: flex-end; } .panel-section-list .panel-section-separator { margin: 4px 0; } /* Panel Section - Footer */ .panel-section-footer { background-color: rgba(0, 0, 0, 0.06); border-top: 1px solid rgba(0, 0, 0, 0.15); color: #1a1a1a; display: flex; flex-direction: row; height: 41px; margin-top: -1px; padding: 0; } .panel-section-footer-button { flex: 1 1 auto; height: 100%; margin: 0 -1px; padding: 12px; text-align: center; } .panel-section-footer-button > .text-shortcut { color: #808080; font-family: "Lucida Grande", caption; font-size: .847em; } .panel-section-footer-button:hover { background-color: rgba(0, 0, 0, 0.06); } .panel-section-footer-button:hover:active { background-color: rgba(0, 0, 0, 0.1); } .panel-section-footer-button.default { background-color: #0996f8; box-shadow: 0 1px 0 #0670cc inset; color: #fff; } .panel-section-footer-button.default:hover { background-color: #0670cc; box-shadow: 0 1px 0 #005bab inset; } .panel-section-footer-button.default:hover:active { background-color: #005bab; box-shadow: 0 1px 0 #004480 inset; } .panel-section-footer-separator { background-color: rgba(0, 0, 0, 0.1); width: 1px; z-index: 99; }
/* Example specific – not part of chrome://browser/content/extension.css */ body { background: #fcfcfc; background-clip: padding-box; border: 1px solid rgba(24,26,27,.2); box-shadow: 0 3px 5px rgba(24,26,27,.1),0 0 7px rgba(24,26,27,.1); box-sizing: content-box; margin: 2em auto .5em; width: 384px; } html { min-height: 100vh; } html > body { margin: auto; } .icon-section-header { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg=="); }