Ein Pop-up ist eine Aktion, mit der ein Fenster eingeblendet wird, über das Nutzer mehrere Erweiterungsfunktionen aufrufen können. Sie wird durch eine Tastenkombination oder durch Klicken auf das Aktionssymbol der Erweiterung ausgelöst. Pop-ups werden automatisch geschlossen, wenn sich der Nutzer auf einen Bereich des Browsers außerhalb des Pop-ups konzentriert. Das Pop-up-Fenster kann nicht geöffnet bleiben, nachdem der Nutzer weggeklickt hat.
Die folgende Abbildung aus dem Beispiel Trinkwasser-Ereignis zeigt ein Pop-up-Fenster mit den verfügbaren Timer-Optionen. Nutzer stellen durch Klicken auf eine der Schaltflächen einen Wecker ein.
<ph type="x-smartling-placeholder">
Registriere ein Pop-up 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. JavaScript-Code, der 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.
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'});
}
});