Ein Pop-up ist eine Aktion, die ein Fenster anzeigt, in dem Nutzer mehrere Erweiterungsfunktionen aufrufen können. Sie wird über eine Tastenkombination oder durch Klicken auf das Aktionssymbol der Erweiterung aufgerufen. Pop-ups werden automatisch geschlossen, wenn der Nutzer einen Teil des Browsers außerhalb des Pop-ups sieht. Es gibt keine Möglichkeit, das Pop-up geöffnet zu lassen, nachdem der Nutzer weggeklickt hat.
Das folgende Bild aus dem Beispiel Trinkwasserereignis zeigt ein Pop-up mit den verfügbaren Timer-Optionen. Benutzer stellen einen Alarm ein, 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 wie bei fast jeder anderen Webseite auch. Beachten Sie, dass sich jeglicher JavaScript-Code, der in einem Pop-up verwendet wird, in einer separaten Datei befinden muss.
<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.
chrome.storage.local.get('signed_in', (data) => {
if (data.signed_in) {
chrome.action.setPopup({popup: 'popup.html'});
} else {
chrome.action.setPopup({popup: 'popup_sign_in.html'});
}
});