Browserstile

Ihre Erweiterung kann Benutzeroberflächenelemente enthalten - Browser- und Seitenaktionen wie Popups, Seitenleisten und Optionsseiten, die folgendermaßen spezifiziert werden:

Erstellen einer HTML-Datei, die die Struktur des UI-Elements definiert.
Hinzufügen eines manifest.json-Schlüssels (action, browser_action, page_action, sidebar_action oder options_ui), der auf diese HTML-Datei verweist.

Sie können diese Elemente so gestalten, dass sie dem Stil des Browsers entsprechen. Die manifest.json-Schlüssel enthalten eine optionale Eigenschaft, die dabei hilft: browser_style. Wenn diese enthalten ist und auf true gesetzt wird, erhält Ihr Dokument ein oder mehrere zusätzliche Stylesheets, die dabei helfen, das Aussehen an die Benutzeroberfläche des Browsers und an andere Erweiterungen, die die Eigenschaft browser_style verwenden, anzupassen.

Hinweis: Die Unterstützung für browser_style in Manifest V3 ist veraltet. Ab Firefox 115 ändert sich der Standardwert von options_ui.browser_style und sidebar_action.browser_style von true auf false. In Firefox 118 wird "browser_style": true in Manifest V3-Erweiterungen nicht mehr unterstützt. Wenn Ihre Manifest V3-Erweiterung auf den "browser_style": true-Styles beruht, folgen Sie dem Leitfaden zur Migration von Manifest V3 für browser_style. Weitere Informationen finden Sie unter (Firefox Bug 1827910). Wenn Sie den Firefox-Stil auf Ihre Erweiterung anwenden möchten, siehe den Firefox Style Guide.

Wenn Sie erwägen, browser_style: true zu verwenden, testen Sie Ihre Erweiterung mit verschiedenen Themes (integriert oder von AMO), um sicherzustellen, dass die UI der Erweiterung wie erwartet funktioniert.

Warnung: Wenn browser_style: true in Ihrer Web-Erweiterungs-Manifestdatei enthalten ist, wird die Textauswahl in der Benutzeroberfläche Ihrer Erweiterung außer in Eingabesteuerelementen deaktiviert. Wenn dies ein Problem verursacht, fügen Sie stattdessen browser_style:false ein.

Hinweis: Google Chrome und Opera verwenden chrome_style anstelle von browser_style in Manifest V2. Für cross-browser Erweiterungen müssen Sie daher beide Schlüssel hinzufügen. chrome_style ist in Manifest V3 nicht verfügbar.

In Firefox kann das Stylesheet unter chrome://browser/content/extension.css eingesehen werden. Das zusätzliche Stylesheet unter chrome://browser/content/extension-mac.css wird ebenfalls auf macOS eingebunden.

Die meisten Stile werden automatisch angewendet, aber einige Elemente erfordern, dass Sie die nicht standardisierte browser-style-Klasse hinzufügen, um deren Styling zu erhalten, wie in der Tabelle unten beschrieben:

Element	Beispiel
`<button>`	html `<button class="browser-style">Klicken Sie hier</button>`
`<select>`	html `<select class="browser-style" name="select"> <option value="value1">Wert 1</option> <option value="value2" selected>Wert 2</option> <option value="value3">Wert 3</option> </select>`
`<textarea>`	html `<textarea class="browser-style">Schreiben Sie hier</textarea>`
Eltern eines `<input>`	html `<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>`

Migration von Manifest V3

Da browser_style in Manifest V3 veraltet ist, möchten Sie vielleicht die Unterstützung entfernen, wenn Sie Ihre Manifest V2-Erweiterungen migrieren. Verwenden Sie options_ui als Beispiel, würden Sie diese Schritte unternehmen, um die Unterstützung für browser_style zu entfernen:

Setzen Sie options_ui/browser_style auf false.
Ändert sich das Erscheinungsbild Ihrer Erweiterungs-UI?
- Wenn sich das Erscheinungsbild nicht ändert, entfernen Sie den Schlüssel.
- Wenn sich das Erscheinungsbild ändert, experimentieren Sie, um herauszufinden, welche Abhängigkeiten bestehen, und fügen Sie die relevanten Eigenschaften im Stylesheet der Erweiterung hinzu. Die Stile, die am wahrscheinlichsten Layoutänderungen verursachen, sind box-sizing:, border-box, und display: flex. Wenn Sie die Abhängigkeiten nicht identifizieren können, fügen Sie den Inhalt von extension.css mit der Erweiterung ein und löschen Sie alle nicht relevanten Teile, üblicherweise die body- und body *-Blöcke, da die meisten Erweiterungen die browser-style-Klasse nicht verwenden.

Firefox-Panel-Komponenten (veraltet)

Hinweis: Diese Funktion ist nicht standardisiert und funktioniert nur in Firefox.

Das Stylesheet chrome://browser/content/extension.css enthält auch die Stile für die veralteten Firefox-Panel-Komponenten (Navigationskomponenten).

Der veraltete Firefox Style Guide dokumentiert die ordnungsgemäße Verwendung.

Element	Beispiel
Kopfzeile	html `<header class="panel-section panel-section-header"> <div class="icon-section-header"><img src="image.svg"/></div> <div class="text-section-header">Kopfzeile</div> </header>`
Fußzeile	html `<footer class="panel-section panel-section-footer"> <button class="panel-section-footer-button">Abbrechen</button> <div class="panel-section-footer-separator"></div> <button class="panel-section-footer-button default">Bestätigen</button> </footer>`
Tabs	html `<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>`
Formular	html <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>Dropdown</option> <option value="value2">Listenelement</option> <option value="value3">Listenelement</option> </select> </div> <div class="panel-formElements-item"> <label for="placeholder01">Label:</label> <input type="text" placeholder="Platzhalter" id="placeholder01" /> <button name="expander" class="expander" aria-label="Erweitern"></button> </div> </div>
Menü	html <div class="panel-section panel-section-list"> <div class="panel-list-item"> <div class="icon"></div> <div class="text">Listenelement</div> <div class="text-shortcut">Strg-L</div> </div> <div class="panel-list-item"> <div class="icon"></div> <div class="text">Listenelement</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">Deaktiviertes Listenelement</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">Listenelement</div> <div class="text-shortcut"></div> </div> `<div class="panel-list-item"> <div class="icon"></div> <div class="text">Listenelement</div> <div class="text-shortcut"></div> </div> </div>`

Beispiel

HTML

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>

/* 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;
  appearance: none;
  border: none;
}

/* Panel Section */
.panel-section {
  display: flex;
  flex-direction: row;
}

.panel-section-separator {
  background-color: rgb(0 0 0 / 0.15);
  min-height: 1px;
}

/* Panel Section - Header */
.panel-section-header {
  border-bottom: 1px solid rgb(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: rgb(0 0 0 / 0.06);
  border-bottom: 1px solid rgb(0 0 0 / 0.1);
  border-top: 1px solid rgb(0 0 0 / 0.1);
}

.panel-list-item:not(.disabled):hover:active {
  background-color: rgb(0 0 0 / 0.1);
}

.panel-list-item.disabled {
  color: #999999;
}

.panel-list-item > .icon {
  flex-grow: 0;
  flex-shrink: 0;
}

.panel-list-item > .text {
  flex-grow: 10;
}

.panel-list-item > .text-shortcut {
  color: gray;
  font-family: "Lucida Grande", caption;
  font-size: 0.847em;
  justify-content: flex-end;
}

.panel-section-list .panel-section-separator {
  margin: 4px 0;
}

/* Panel Section - Footer */
.panel-section-footer {
  background-color: rgb(0 0 0 / 0.06);
  border-top: 1px solid rgb(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: gray;
  font-family: "Lucida Grande", caption;
  font-size: 0.847em;
}

.panel-section-footer-button:hover {
  background-color: rgb(0 0 0 / 0.06);
}

.panel-section-footer-button:hover:active {
  background-color: rgb(0 0 0 / 0.1);
}

.panel-section-footer-button.default {
  background-color: #0996f8;
  box-shadow: 0 1px 0 #0670cc inset;
  color: white;
}

.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: rgb(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 rgb(24 26 27 / 0.2);
  box-shadow:
    0 3px 5px rgb(24 26 27 / 0.1),
    0 0 7px rgb(24 26 27 / 0.1);
  box-sizing: content-box;
  margin: 2em auto 0.5em;
  width: 384px;
}

html {
  min-height: 100vh;
}

html > body {
  margin: auto;
}

.icon-section-header {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48Y2lyY2xlIGZpbGw9IiMzNjM5NTkiIGN4PSIxNSIgY3k9IjE1IiByPSIxNSIvPjwvc3ZnPg==");
}

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Browserstile

Migration von Manifest V3

Firefox-Panel-Komponenten (veraltet)

Beispiel

HTML

Ergebnis

Browser-Kompatibilität

webextensions.manifest.action

webextensions.manifest.browser_action

webextensions.manifest.page_action

webextensions.manifest.sidebar_action

webextensions.manifest.options_ui

Help improve MDN