action
Typ | Object |
---|---|
Verpflichtend | Nein |
Manifest-Version | 3 oder höher |
Beispiel |
json
|
Eine Aktion ist ein Button, den Ihre Erweiterung zur Browser-Symbolleiste hinzufügt. Der Button hat ein Icon und kann optional ein Popup haben, dessen Inhalt mit HTML, CSS und JavaScript spezifiziert wird.
Dieser Schlüssel ersetzt browser_action
in Manifest V3-Erweiterungen.
Sie müssen diesen Schlüssel spezifizieren, um einen Browser-Symbolleisten-Button in Ihrer Erweiterung einzubeziehen. Wenn angegeben, können Sie den Button programmgesteuert mit der action
API manipulieren.
Wenn Sie ein Popup bereitstellen, wird das Popup geöffnet, wenn der Benutzer auf den Button klickt, und Ihr JavaScript, das im Popup ausgeführt wird, kann die Interaktion des Benutzers damit handhaben. Wenn Sie kein Popup bereitstellen, wird ein Klickereignis an die Hintergrundskripte Ihrer Erweiterung gesendet, wenn der Benutzer auf den Button klickt.
Syntax
Der action
-Schlüssel ist ein Objekt, das alle dieser optionalen Eigenschaften haben kann:
Name | Typ | Beschreibung |
---|---|---|
browser_style
Optional Veraltet |
Boolean |
Optional, standardmäßig
Setzen Sie |
default_area
Optional |
String |
Definiert den Teil des Browsers, in dem der Button 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 standardmäßig den Wert "menupanel".
Firefox merkt sich die Eine Erweiterung kann den Standort des Buttons nach der Installation nicht ändern, aber der Benutzer kann in der Lage sein, den Button mit dem integrierten UI-Anpassungsmechanismus des Browsers zu verschieben. |
default_icon
Optional |
Object oder String |
Verwenden Sie dies, um ein oder mehrere Icons für die Aktion zu spezifizieren. Das Icon wird standardmäßig in der Browser-Symbolleiste angezeigt. Icons werden als URLs relativ zur manifest.json-Datei selbst spezifiziert. Sie können eine einzelne Icon-Datei angeben, indem Sie hier einen String liefern: json
Um mehrere Icons in verschiedenen Größen zu spezifizieren, geben Sie hier ein Objekt an. Der Name jeder Eigenschaft ist die Höhe des Icons in Pixeln und muss in einen Integer konvertierbar sein. Der Wert ist die URL. Zum Beispiel: json
Sie können nicht mehrere Icons gleicher Größe 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 unter Verwendung von
Anders als bei einer normalen Webseite kann JavaScript, das im Popup ausgeführt wird, auf alle WebExtension-APIs zugreifen (natürlich vorausgesetzt, die Erweiterung hat die entsprechenden Berechtigungen). Dies ist eine lokalisierbare Eigenschaft. |
default_title
Optional |
String |
Tooltip für den Button, der angezeigt wird, wenn der Benutzer den Mauszeiger darüber bewegt. Wenn der Button zum Menü-Panel des Browsers hinzugefügt wird, wird dies auch unter dem App-Icon angezeigt. Dies ist eine lokalisierbare Eigenschaft. |
theme_icons
Optional |
Array |
Diese Eigenschaft ermöglicht es Ihnen, je nach Verwendung eines dunklen oder hellen Textes im Theme unterschiedliche Icons zu spezifizieren.
Wenn diese Eigenschaft vorhanden ist, handelt es sich um ein Array, das mindestens ein
Icons werden als URLs relativ zur manifest.json-Datei angegeben.
Sie sollten 16x16 und 32x32 (für Retina-Displays)
|
Wahl der Icon-Größen
Das Icon der Aktion muss möglicherweise in verschiedenen Größen in verschiedenen Kontexten angezeigt werden:
- Das Icon wird in der Browser-Symbolleiste angezeigt. Ältere Versionen von Firefox unterstützten die Option, das Icon im Menü-Panel des Browsers (dem Panel, das sich öffnet, wenn der Benutzer auf das "Hamburger"-Icon klickt) anzuzeigen. In diesen Versionen von Firefox war das Icon im Menü-Panel größer als das Icon in der Symbolleiste.
- Auf einem hochauflösenden Display wie einem Retina-Bildschirm müssen Icons doppelt so groß sein.
Wenn der Browser kein Icon in der richtigen Größe in einer bestimmten Situation finden kann, wählt er die beste Übereinstimmung und skaliert diese. Skalierung kann dazu führen, dass das Icon unscharf aussieht, daher ist es wichtig, die Icon-Größen sorgfältig auszuwählen.
Es gibt zwei Hauptansätze dafür. Sie können ein einzelnes Icon als SVG-Datei bereitstellen, und es wird korrekt skaliert:
"default_icon": "path/to/geo.svg"
Alternativ können Sie mehrere Icons in verschiedenen Größen bereitstellen, und der Browser wählt die beste Übereinstimmung.
In Firefox:
- Die Standardhöhe und -breite für Icons in der Symbolleiste ist 16 *
window.devicePixelRatio
. - Die Standardhöhe und -breite für Icons im Menü-Panel ist 32 *
window.devicePixelRatio
.
So können Sie Icons angeben, die sowohl auf normalen als auch auf Retina-Displays exakt übereinstimmen, indem Sie drei Icon-Dateien bereitstellen und sie folgendermaßen spezifizieren:
"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 finden kann, wird es das kleinste angegebenen Icon wählen, das größer als die ideale Größe ist. Wenn alle Icons kleiner als die ideale Größe sind, wird es das größte angegebene Icon wählen.
Beispiel
"action": {
"default_icon": {
"16": "button/geo-16.png",
"32": "button/geo-32.png"
}
}
Eine Aktion mit nur einem Icon, das in 2 Größen angegeben ist. Die Hintergrundskripte der Erweiterung können Klickereignisse empfangen, wenn der Benutzer auf das Icon klickt, indem sie Code wie diesen verwenden:
browser.action.onClicked.addListener(handleClick);
"action": {
"default_icon": {
"16": "button/geo-16.png",
"32": "button/geo-32.png"
},
"default_title": "Whereami?",
"default_popup": "popup/geo.html"
}
Eine Aktion mit einem Icon, einem Titel und einem Popup. Das Popup wird angezeigt, wenn der Benutzer auf den Button klickt.
Browser-Kompatibilität
Loading…