Popups
Ein Popup ist ein Dialog, der mit einer Schaltfläche in der Symbolleiste oder einer Schaltfläche in der Adressleiste verknüpft ist. Diese Seite beschreibt Popups im Allgemeinen und erläutert, wie Sie sie festlegen, debuggen, ihre Größe anpassen und sie gestalten. Außerdem enthält sie Anwendungsbeispiele.
Wenn der Benutzer auf die Schaltfläche klickt, wird das Popup angezeigt. Wenn er außerhalb des Popups klickt, wird es geschlossen. Das Popup kann programmgesteuert geschlossen werden, indem ein im Popup ausgeführtes Skript window.close() aufruft. Sie können das Popup jedoch nicht programmgesteuert aus dem JavaScript einer Erweiterung öffnen; es kann nur als Reaktion auf eine Benutzeraktion geöffnet werden.
Sie können ein Tastenkürzel zum Öffnen des Popups definieren: in Manifest V2 mit den Tastenkürzeln "_execute_browser_action" und "_execute_page_action", in Manifest V3 mit "_execute_action" und, sofern unterstützt, "_execute_page_action". Weitere Informationen finden Sie in der Dokumentation zu den speziellen Tastenkürzeln für den manifest.json-Schlüssel commands.
Ein Popup festlegen
Das Popup wird als HTML-Datei festgelegt, die wie eine normale Webseite CSS- und JavaScript-Dateien einbinden kann. Anders als bei einer normalen Seite kann das JavaScript jedoch alle WebExtension-APIs verwenden, für die die Erweiterung Berechtigungen besitzt.
Das Dokument des Popups wird bei jeder Anzeige des Popups geladen und bei jedem Schließen wieder entladen.
Die HTML-Datei ist in der Erweiterung enthalten und wird in der manifest.json über "default_popup" als Teil des Schlüssels browser_action oder page_action angegeben:
"browser_action": {
"default_icon": "icons/beasts-32.png",
"default_title": "Beastify",
"default_popup": "popup/choose_beast.html"
}
Für Popups gilt eine Content Security Policy, die einschränkt, aus welchen Quellen sie Ressourcen laden können, und einige unsichere Praktiken wie die Verwendung von eval() untersagt. Weitere Informationen hierzu finden Sie unter Content Security Policy.
Popups debuggen
Sie können das Markup und das JavaScript eines Popups mit dem Add-on-Debugger debuggen. Dazu müssen Sie jedoch die Funktion „Disable popup auto-hide“ aktivieren, damit Popups nicht ausgeblendet werden, wenn Sie außerhalb davon klicken. Weitere Informationen zum Debuggen von Popups.
Größe von Popups anpassen
Popups passen ihre Größe automatisch an ihren Inhalt an. Der dafür verwendete Algorithmus kann sich je nach Browser unterscheiden.
In Firefox wird die Größe unmittelbar vor der Anzeige des Popups und nach DOM-Änderungen höchstens zehnmal pro Sekunde berechnet. Bei Dokumenten im Strict Mode basiert die Berechnung auf der Layoutgröße des <body>-Elements. Im Quirks Mode ist das <html>-Element maßgeblich. Firefox berechnet die bevorzugte Breite des Inhalts dieses Elements, führt das Layout mit dieser Breite erneut aus und passt anschließend die Größe so an, dass kein vertikales Scrollen erforderlich ist. Das Popup wird höchstens 800 × 600 Pixel groß, sofern diese Größe auf den Bildschirm des Benutzers passt. (Vor Firefox 60 waren es nur 680 px.) Wenn der Benutzer die Schaltfläche der Erweiterung ins Menü verschiebt oder sie im Überlaufmenü der Symbolleiste erscheint, wird das Popup innerhalb des Menü-Panels angezeigt und erhält eine feste Breite.
Wenn Sie die width des Popups in CSS festlegen, sollten Sie sie für <body> und nicht für :root festlegen.
In Firefox für Android 57 wird das Popup als normale Seite in einem neuen Tab angezeigt.
Popup-Gestaltung
Wie Sie die Webseite Ihres Popups so gestalten, dass sie zum Stil von Firefox passt, erfahren Sie im Acorn Design System.
Beispiele
Das Repository webextensions-examples auf GitHub enthält das Beispiel beastify, das eine browser action mit einem Popup implementiert.