Browser-Stile

Ihre Erweiterung kann Benutzeroberflächenelemente umfassen - Browser- und Seitenaktions-Popups, Seitenleisten und Optionsseiten - die wie folgt spezifiziert werden:

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

Sie können diese Elemente gestalten, um dem Stil des Browsers zu entsprechen. Die manifest.json-Schlüssel enthalten eine optionale Eigenschaft, die dabei hilft: browser_style. Wenn diese eingeschlossen und auf true gesetzt ist, erhält Ihr Dokument ein oder mehrere zusätzliche Stylesheets, die helfen, es konsistent mit der Benutzeroberfläche des Browsers und anderen Erweiterungen aussehen zu lassen, die die browser_style-Eigenschaft verwenden.

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 in false. In Firefox 118 wird "browser_style": true in Manifest V3-Erweiterungen nicht mehr unterstützt. Wenn Ihre Manifest V3-Erweiterung auf die Stile von "browser_style": true angewiesen ist, folgen Sie dem Manifest V3 Migrations-Leitfaden für browser_style. Siehe (Firefox Bug 1827910) für weitere Informationen. Wenn Sie den Firefox-Stil auf Ihre Erweiterung anwenden möchten, sehen Sie sich den Firefox Style Guide an.

Wenn Sie überlegen, ob Sie browser_style: true verwenden sollten, testen Sie Ihre Erweiterung mit verschiedenen Themen (eingebaut oder von AMO), um sicherzustellen, dass die Benutzeroberfläche der Erweiterung so funktioniert, wie Sie es erwarten.

Warnung: Wenn browser_style: true im Manifest Ihrer Web-Erweiterung enthalten ist, wird die Textauswahl in der Benutzeroberfläche Ihrer Erweiterung deaktiviert, außer in Eingabesteuerelementen. Falls dies ein Problem darstellt, 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 angezeigt werden. Das zusätzliche Stylesheet unter chrome://browser/content/extension-mac.css wird ebenfalls unter macOS eingeschlossen.

Die meisten Stile werden automatisch angewendet, doch für einige Elemente müssen Sie die nicht standardmäßige browser-style-Klasse hinzufügen, um deren Styling zu erhalten, wie in der folgenden Tabelle detailliert:

Element Beispiel
<button>
html
<button class="browser-style">Klicken Sie

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

Manifest V3 Migration

Da browser_style in Manifest V3 veraltet ist, möchten Sie möglicherweise 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 der Benutzeroberfläche Ihrer Erweiterung?
    • 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 höchstwahrscheinlich 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 Teile, die nicht relevant sind, normalerweise die body und body * Blöcke, da die meisten Erweiterungen die browser-style-Klasse nicht verwenden.

Firefox-Panelkomponenten (veraltet)

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

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

Der veraltete Firefox Style Guide dokumentiert die richtige Verwendung.

Element Beispiel
Header
html
<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>
Footer
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="true">Dropdown</option>
      <option value="value2">Listeneintrag</option>
      <option value="value3">Listeneintrag</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"></button>
  </div>
</div>
Menü
html
<div class="panel-section panel-section-list">
  <div class="panel-list-item">
    <div class="icon"></div>
    <div class="text">Listeneintrag</div>
    <div class="text-shortcut">Strg-L</div>
  </div>
<div class="panel-list-item">
<div class="icon"></div>
<div class="text">Listeneintrag</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">Deaktivierter Listeneintrag</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">Listeneintrag</div>
<div class="text-shortcut"></div>
</div><div class="panel-list-item">
<div class="icon"></div>
<div class="text">Listeneintrag</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>

Ergebnis

Browser-Kompatibilität

webextensions.manifest.action

webextensions.manifest.browser_action

webextensions.manifest.page_action

webextensions.manifest.sidebar_action

webextensions.manifest.options_ui