Browser-Stile
Ihre Erweiterung kann Benutzeroberflächenelemente enthalten – Browser- und Seitenaktions-Popups, Seitenleisten und Optionsseiten –, die durch folgende Schritte 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
oderoptions_ui
), der auf diese HTML-Datei zeigt.
Sie können diese Elemente so gestalten, dass sie zum Stil des Browsers passen. Die manifest.json-Schlüssel beinhalten 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 dabei helfen, es optisch mit dem UI des Browsers und anderen Erweiterungen, die die browser_style
-Eigenschaft verwenden, abzustimmen.
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 die "browser_style": true
-Stile angewiesen ist, folgen Sie der Manifest V3 Migrationsanleitung für browser_style
.
Weitere Informationen finden Sie unter (Firefox Bug 1827910).
Wenn Sie den Firefox-Stil auf Ihre Erweiterung anwenden möchten, sehen Sie sich den Firefox Style Guide an.
Wenn Sie überlegen, browser_style: true
zu verwenden, testen Sie Ihre Erweiterung mit verschiedenen Themen (eingebaut oder von AMO), um sicherzustellen, dass die UI der Erweiterung so funktioniert, wie Sie es erwarten.
Warnung: Wenn browser_style: true
in das Manifest Ihrer Web-Erweiterung aufgenommen wird, ist die Textauswahl in der UI Ihrer Erweiterung außer bei Eingabesteuerungen deaktiviert. Wenn dies ein Problem verursacht, verwenden Sie stattdessen browser_style:false
.
Hinweis: Google Chrome und Opera verwenden chrome_style
anstelle von browser_style
in Manifest V2. Für plattformübergreifende 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 auch unter macOS eingeschlossen.
Die meisten Stile werden automatisch angewendet, aber einige Elemente erfordern, dass Sie die nicht standardmäßige browser-style
-Klasse hinzufügen, um deren Stil zu erhalten, wie in der folgenden Tabelle beschrieben:
Element | Beispiel |
---|---|
<button> |
html
|
html
|
|
<textarea> |
html
|
Elternteil von einem
<input>
|
html
|
Migration zu Manifest V3
Da browser_style
in Manifest V3 veraltet ist, möchten Sie möglicherweise die Unterstützung entfernen, wenn Sie Ihre Erweiterungen von Manifest V2 migrieren. Verwenden des Beispiels options_ui
sollten Sie diese Schritte unternehmen, um die Unterstützung für browser_style
zu entfernen:
- Setzen Sie
options_ui/browser_style
auffalse
. - Ändert sich das Erscheinungsbild Ihrer Erweiterungsschnittstelle?
- Wenn sich das Erscheinungsbild nicht ändert, entfernen Sie den Schlüssel.
-
Wenn sich das Erscheinungsbild ändert, experimentieren Sie, um festzustellen, welche Abhängigkeiten bestehen, und fügen Sie die relevanten Eigenschaften in das Stylesheet der Erweiterung ein. Die Stile, die am wahrscheinlichsten Layoutänderungen verursachen, sind
box-sizing:
,border-box
unddisplay: flex
. Wenn Sie die Abhängigkeiten nicht identifizieren können, fügen Sie den Inhalt von extension.css in die Erweiterung ein und löschen Sie alle nicht relevanten Teile, gewöhnlich diebody
undbody *
Blöcke, da die meisten Erweiterungen diebrowser-style
-Klasse nicht verwenden.
Firefox-Panel-Komponenten (veraltet)
Hinweis: Dieses Feature 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-Panel-Komponenten (Navigationselemente).
Der Legacy Firefox Style Guide dokumentiert die korrekte Verwendung.
Element | Beispiel |
---|---|
Header |
html
|
Footer |
html
|
Tabs |
html
|
Formular |
html
|
Menü |
html
|
Beispiel
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
BCD tables only load in the browser
webextensions.manifest.browser_action
BCD tables only load in the browser
webextensions.manifest.page_action
BCD tables only load in the browser
webextensions.manifest.sidebar_action
BCD tables only load in the browser
webextensions.manifest.options_ui
BCD tables only load in the browser