Ein Pop-up ist eine Aktion, mit der ein Fenster geöffnet wird, in dem Nutzer mehrere Erweiterungsfunktionen aufrufen können. Sie wird durch ein Tastenkürzel, durch Klicken auf das Aktionssymbol der Erweiterung oder durch Aufrufen von browser.action.openPopup() ausgelöst. Pop-ups werden automatisch geschlossen, wenn der Nutzer den Fokus auf einen Bereich des Browsers außerhalb des Pop-ups verschiebt. Das Pop-up kann nicht geöffnet bleiben, nachdem der Nutzer es weggeklickt hat.
Das folgende Bild aus dem Beispiel Drink Water Event (Ereignis „Wasser trinken“) zeigt ein Pop-up-Fenster mit verfügbaren Timeroptionen. Nutzer stellen einen Wecker, indem sie auf eine der Schaltflächen klicken.
Registrieren Sie ein Pop-up-Fenster im Manifest unter dem Schlüssel "action".
{
"name": "Drink Water Event",
...
"action": {
"default_popup": "popup.html"
}
...
}
Implementieren Sie das Pop-up-Fenster wie jede andere Webseite. JavaScript, das in einem Pop-up verwendet wird, muss sich in einer separaten Datei befinden.
<html>
<head>
<title>Water Popup</title>
</head>
<body>
<img src="./stay_hydrated.png" id="hydrateImage">
<button id="sampleSecond" value="0.1">Sample Second</button>
<button id="min15" value="15">15 Minutes</button>
<button id="min30" value="30">30 Minutes</button>
<button id="cancelAlarm">Cancel Alarm</button>
<script src="popup.js"></script>
</body>
</html>
Sie können Pop-ups auch dynamisch erstellen, indem Sie action.setPopup() aufrufen.
browser.storage.local.get('signed_in', (data) => {
if (data.signed_in) {
browser.action.setPopup({popup: 'popup.html'});
} else {
browser.action.setPopup({popup: 'popup_sign_in.html'});
}
});