browser_action
Typ | Object |
---|---|
Erforderlich | Nein |
Manifest-Version | 2 |
Beispiel |
json
|
Eine Browser-Aktion ist eine Schaltfläche, die Ihre Erweiterung zur Symbolleiste des Browsers hinzufügt. Die Schaltfläche hat ein Symbol und kann optional ein Popup haben, dessen Inhalt mit HTML, CSS und JavaScript festgelegt wird.
Dieser Schlüssel wird in Manifest V3-Erweiterungen durch action
ersetzt.
Sie müssen diesen Schlüssel angeben, um eine Schaltfläche zur Browser-Symbolleiste Ihrer Erweiterung hinzuzufügen. Wenn Sie ihn angeben, können Sie die Schaltfläche programmatisch mit der browserAction
-API manipulieren.
Wenn Sie ein Popup bereitstellen, wird das Popup geöffnet, wenn der Benutzer auf die Schaltfläche klickt, und Ihr JavaScript, das im Popup ausgeführt wird, kann die Benutzerinteraktion mit diesem steuern. Wenn Sie kein Popup bereitstellen, wird beim Klicken auf die Schaltfläche ein Klickereignis an die Hintergrundskripte Ihrer Erweiterung gesendet.
Syntax
Der Schlüssel browser_action
ist ein Objekt, das jede der folgenden Eigenschaften enthalten kann, alle optional:
Name | Typ | Beschreibung |
---|---|---|
browser_style Optional |
Boolean |
Optional, Standardwert ist Setzen Sie
In Firefox kann das Stylesheet unter
chrome://browser/content/extension.css oder
chrome://browser/content/extension-mac.css auf macOS angesehen werden. Wenn Sie
Dimensionen festlegen, beachten Sie, dass dieses Stylesheet
Browser-Stile beschreibt die Klassen, die Sie auf Elemente im Popup anwenden können, um bestimmte Stile zu erhalten.
Die
latest-download
Beispielerweiterung verwendet
Hinweis: Das Setzen von
|
default_area Optional |
String |
Definiert den Teil des Browsers, in dem die Schaltfläche zunächst platziert wird. Dies ist ein String, der einen von vier Werten annehmen kann:
Diese Eigenschaft wird nur in Firefox unterstützt. Diese Eigenschaft ist optional und hat als Standardwert "menupanel".
Firefox merkt sich die Einstellung Eine Erweiterung kann den Ort der Schaltfläche nach der Installation nicht ändern, aber der Benutzer kann möglicherweise die Schaltfläche mit dem integrierten UI-Anpassungsmechanismus des Browsers verschieben. |
default_icon Optional |
Object oder String |
Verwenden Sie dies, um ein oder mehrere Symbole für die Browser-Aktion anzugeben. Das Symbol wird standardmäßig in der Browser-Symbolleiste angezeigt. Symbole werden als URLs angegeben, die relativ zur manifest.json-Datei selbst sind. Sie können eine einzelne Symboldatei angeben, indem Sie hier einen String angeben: json
Um mehrere Symbole in verschiedenen Größen anzugeben, geben Sie hier ein Objekt an. Der Name jeder Eigenschaft ist die Höhe des Symbols in Pixeln und muss in einen Ganzzahl umwandelbar sein. Der Wert ist die URL. Beispiel: json
Sie dürfen nicht mehrere Symbole mit denselben Größen spezifizieren. |
default_popup Optional |
String |
Der Pfad zu einer HTML-Datei, die die Spezifikation des Popups enthält.
Die HTML-Datei kann CSS- und JavaScript-Dateien enthalten, indem
Im Gegensatz zu einer normalen Webseite kann JavaScript, das im Popup läuft, auf alle WebExtension-APIs zugreifen (natürlich vorausgesetzt, dass die Erweiterung die entsprechenden Berechtigungen hat). Dies ist eine lokalisierbare Eigenschaft. |
default_title Optional |
String |
Tooltip für die Schaltfläche, das angezeigt wird, wenn der Benutzer mit der Maus darüber fährt. Wenn die Schaltfläche dem Menü-Panel des Browsers hinzugefügt wird, wird dies auch unter dem App-Symbol angezeigt. Dies ist eine lokalisierbare Eigenschaft. |
theme_icons Optional |
Array |
Diese Eigenschaft ermöglicht es Ihnen, verschiedene Symbole für Themen anzugeben, je nachdem, ob Firefox erkennt, dass das Thema dunklen oder hellen Text verwendet.
Wenn diese Eigenschaft vorhanden ist, ist sie ein Array, das mindestens ein
Symbole werden als URLs angegeben, die relativ zur manifest.json-Datei sind.
Sie sollten 16x16 und 32x32 (für Retina-Display)
|
Auswahl von Symbolgrößen
Das Symbol der Browser-Aktion muss möglicherweise in unterschiedlichen Größen in verschiedenen Kontexten angezeigt werden:
- Das Symbol wird in der Symbolleiste des Browsers angezeigt. Ältere Versionen von Firefox unterstützten die Option, das Symbol im Menü-Panel des Browsers (dem Panel, das geöffnet wird, wenn der Benutzer auf das "Hamburger"-Symbol klickt) zu platzieren. In diesen Versionen von Firefox war das Symbol im Menü-Panel größer als das Symbol in der Symbolleiste.
- Auf einem hochauflösenden Display wie einem Retina-Bildschirm müssen Symbole doppelt so groß sein.
Wenn der Browser kein Symbol der richtigen Größe in einer bestimmten Situation findet, wählt er die beste Übereinstimmung und skaliert es. Skalierung kann das Symbol unscharf erscheinen lassen, daher ist es wichtig, Symbolgrößen sorgfältig zu wählen.
Dafür gibt es zwei Hauptansätze. Sie können ein einzelnes Symbol als SVG-Datei bereitstellen, und es wird korrekt skaliert:
"default_icon": "path/to/geo.svg"
Alternativ können Sie mehrere Symbole in verschiedenen Größen bereitstellen, und der Browser wählt die beste Übereinstimmung.
In Firefox:
- Die Standardhöhe und -breite für Symbole in der Symbolleiste ist 16 *
window.devicePixelRatio
. - Die Standardhöhe und -breite für Symbole im Menü-Panel ist 32 *
window.devicePixelRatio
.
So können Sie Symbole angeben, die genau passen, sowohl auf normalen als auch auf Retina-Displays, indem Sie drei Symboldateien bereitstellen und sie wie folgt angeben:
"default_icon": {
"16": "path/to/geo-16.png",
"32": "path/to/geo-32.png",
"64": "path/to/geo-64.png"
}
Wenn Firefox keine genaue Übereinstimmung für die gewünschte Größe findet, wird es das kleinste angegebene Symbol auswählen, das größer als die ideale Größe ist. Sind alle Symbole kleiner als die ideale Größe, wählt es das größte angegebene Symbol.
Beispiel
"browser_action": {
"default_icon": {
"16": "button/geo-16.png",
"32": "button/geo-32.png"
}
}
Eine Browser-Aktion mit nur einem Symbol, angegeben in 2 verschiedenen Größen. Die Hintergrundskripte der Erweiterung können Klickereignisse empfangen, wenn der Benutzer auf das Symbol klickt, mit Code wie diesem:
browser.browserAction.onClicked.addListener(handleClick);
"browser_action": {
"default_icon": {
"16": "button/geo-16.png",
"32": "button/geo-32.png"
},
"default_title": "Whereami?",
"default_popup": "popup/geo.html"
}
Eine Browser-Aktion mit einem Symbol, einem Titel und einem Popup. Das Popup wird angezeigt, wenn der Benutzer auf die Schaltfläche klickt.
Für eine einfache, aber vollständige Erweiterung, die eine Browser-Aktion verwendet, siehe die schrittweise Anleitung.
Browser-Kompatibilität
BCD tables only load in the browser