browser_action

Typ	`Object`
Verpflichtend	Nein
Manifest-Version	2
Beispiel	json `"browser_action": { "default_icon": { "16": "button/geo-16.png", "32": "button/geo-32.png" }, "default_title": "Whereami?", "default_popup": "popup/geo.html", "theme_icons": [{ "light": "icons/geo-16-light.png", "dark": "icons/geo-16.png", "size": 16 }, { "light": "icons/geo-32-light.png", "dark": "icons/geo-32.png", "size": 32 }] }`

Eine Browser-Aktion ist ein Button, den Ihre Erweiterung zur Symbolleiste des Browsers 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 wird in Manifest V3-Erweiterungen durch action ersetzt.

Sie müssen diesen Schlüssel angeben, um einen Browser-Toolbar-Button in Ihrer Erweiterung einzuschließen. Wenn er angegeben ist, können Sie den Button programmatisch mit der browserAction 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 läuft, kann die Benutzerinteraktion damit handhaben. Wenn Sie kein Popup bereitstellen, wird ein Klickereignis an die Hintergrund-Skripte Ihrer Erweiterung gesendet, wenn der Benutzer auf den Button klickt.

Syntax

Der browser_action-Schlüssel ist ein Objekt, das alle der folgenden optionalen Eigenschaften haben kann:

Name	Typ	Beschreibung
`browser_style` Optional	`Boolean`	Optional, Standardwert ist `false`. Setzen Sie `browser_style` nicht auf true: Es wird in Manifest V3 nicht unterstützt, beginnend mit Firefox 118. Siehe Manifest V3 Migration für `browser_style`. In Firefox kann das Stylesheet unter chrome://browser/content/extension.css oder chrome://browser/content/extension-mac.css auf macOS eingesehen werden. Beim Festlegen von Dimensionen beachten Sie, dass dieses Stylesheet `box-sizing: border-box` setzt (siehe box-sizing). Browser-Stile beschreibt die Klassen, die Sie auf Elemente im Popup anwenden können, um bestimmte Stile zu erhalten. Die latest-download Beispielerweiterung verwendet `browser_style` in ihrem Popup. Hinweis: Das Setzen von `browser_style` auf `true` verhindert, dass Benutzer Text im Popup oder in den Seiteninhalten einer Erweiterung auswählen können. Dies ist normales Verhalten. Sie können keine Teile der Benutzeroberfläche im Browser auswählen. Sie können jedoch diese Einschränkung umgehen, indem Sie Ihren Benutzern das Auswählen von Text auf zwei Arten ermöglichen: Setzen Sie `browser_style` auf `false`. Verwenden Sie CSS-Styling im Body Ihrer Sidebar oder des Popup-HTMLs, um die Textauswahl zu ermöglichen, indem Sie die Regel `-moz-user-select` mit einem Wert von `all` oder `text` hinzufügen.
`default_area` Optional	`String`	Definiert den Teil des Browsers, in dem der Button initial platziert wird. Dies ist ein String, der einen von vier Werten annehmen kann: "navbar": Der Button wird in der Haupt-Symbolleiste des Browsers platziert, neben der URL-Leiste. "menupanel": Der Button wird in einem Popup-Panel platziert. "tabstrip": Der Button wird in der Symbolleiste platziert, die die Browser-Tabs enthält. "personaltoolbar": Der Button wird in der Lesezeichen-Symbolleiste platziert. Diese Eigenschaft wird nur in Firefox unterstützt. Diese Eigenschaft ist optional und hat "menupanel" als Standardwert. Firefox merkt sich die `default_area`-Einstellung einer Erweiterung, selbst wenn diese deinstalliert und anschließend neu installiert wird. Um den Browser dazu zu zwingen, einen neuen Wert für `default_area` zu berücksichtigen, muss die ID der Erweiterung geändert werden. Eine Erweiterung kann die Position des Buttons nach der Installation nicht ändern, aber der Benutzer kann möglicherweise den Button mit dem integrierten UI-Anpassungsmechanismus des Browsers verschieben.
`default_icon` Optional	`Object` oder `String`	Verwenden Sie dies, um ein oder mehrere Icons für die Browser-Aktion anzugeben. Das Icon wird standardmäßig in der Browser-Symbolleiste angezeigt. Icons werden als relative URLs zur manifest.json-Datei selbst angegeben. Sie können eine einzelne Icon-Datei angeben, indem Sie hier einen String angeben: json `"default_icon": "path/to/geo.svg"` Um mehrere Icons in verschiedenen Größen anzugeben, geben Sie hier ein Objekt an. Der Name jeder Eigenschaft ist die Höhe des Icons in Pixeln und muss in eine Ganzzahl konvertierbar sein. Der Wert ist die URL. Zum Beispiel: json `"default_icon": { "16": "path/to/geo-16.png", "32": "path/to/geo-32.png" }` Sie können nicht mehrere Icons in denselben Größen angeben. Siehe Auswahl von Icon-Größen für weitere Hinweise dazu.
`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 mit `<link>` und `<script>` Elementen einbinden, genau wie eine normale Webseite. Allerdings muss `<script>` das `src`-Attribut haben, um eine Datei zu laden. Verwenden Sie kein `<script>` mit eingebettetem Code, da dies zu einer verwirrenden Content Violation Policy-Fehlermeldung führt. Anders als bei einer normalen Webseite kann das JavaScript, das im Popup läuft, auf alle WebExtension-APIs zugreifen (vorausgesetzt, die Erweiterung besitzt die entsprechenden Berechtigungen). Dies ist eine lokalisierbare Eigenschaft.
`default_title` Optional	`String`	Tooltip für den Button, der angezeigt wird, wenn der Benutzer die Maus 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 Erkennung von dunklem oder hellem Text im Theme, unterschiedliche Icons für Themes anzugeben. Wenn diese Eigenschaft vorhanden ist, handelt es sich um ein Array, das mindestens ein `ThemeIcons`-Objekt enthält. Ein `ThemeIcons`-Objekt enthält drei erforderliche Eigenschaften: `"dark"` Eine URL, die auf ein Icon zeigt. Dieses Icon wird angezeigt, wenn ein Theme verwendet wird, das dunklen Text verwendet (wie das Firefox Light Theme und das Standard-Theme, wenn kein default_icon angegeben ist). `"light"` Eine URL, die auf ein Icon zeigt. Dieses Icon wird angezeigt, wenn ein Theme verwendet wird, das hellen Text verwendet (wie das Firefox Dark Theme). `"size"` Die Größe der beiden Icons in Pixeln. Icons werden als relative URLs zur manifest.json-Datei angegeben. Sie sollten 16x16 und 32x32 (für Retina-Displays) `ThemeIcons` bereitstellen.

Auswahl von Icon-Größen

Das Icon für die Browser-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 Möglichkeit, das Icon im Menüpanel des Browsers zu platzieren (das Panel, das geöffnet wird, wenn der Benutzer auf das "Hamburger"-Icon klickt). In diesen Versionen von Firefox war das Icon im Menüpanel größer als in der Symbolleiste.
Auf einem hochauflösenden Display wie einem Retina-Bildschirm müssen die Icons doppelt so groß sein.

Wenn der Browser in einer bestimmten Situation kein Icon der richtigen Größe findet, wählt er die beste Übereinstimmung und skaliert es. Skalierung kann dazu führen, dass das Icon unscharf erscheint, 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:

json

"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 aus.

In Firefox:

Die Standardhöhe und -breite für Icons in der Symbolleiste beträgt 16 * window.devicePixelRatio.
Die Standardhöhe und -breite für Icons im Menüpanel beträgt 32 * window.devicePixelRatio.

Sie können also Icons bereitstellen, die genau passen, sowohl auf normalen als auch auf Retina-Displays, indem Sie drei Icon-Dateien bereitstellen und sie so angeben:

json

"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 der gewünschten Größe findet, wählt es das kleinste angegebene Icon, das größer ist als die ideale Größe. Wenn alle Icons kleiner als die ideale Größe sind, wählt es das größte angegebene Icon.

Beispiel

json

"browser_action": {
  "default_icon": {
    "16": "button/geo-16.png",
    "32": "button/geo-32.png"
  }
}

Eine Browser-Aktion mit nur einem Icon, in 2 verschiedenen Größen spezifiziert. Die Hintergrundskripte der Erweiterung können Klickereignisse empfangen, wenn der Benutzer auf das Icon klickt, indem sie Code wie diesen verwenden:

browser.browserAction.onClicked.addListener(handleClick);

json

"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 Icon, einem Titel und einem Popup. Das Popup wird angezeigt, wenn der Benutzer auf den Button klickt.

Für eine einfache, aber vollständige Erweiterung, die eine Browser-Aktion verwendet, siehe das Schritt-für-Schritt-Tutorial.

Browser-Kompatibilität

Siehe auch

Help improve MDN

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

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