Een pop-up is een actie die een venster weergeeft waarin gebruikers meerdere extensiefuncties kunnen aanroepen. Het wordt geactiveerd door een sneltoets op het toetsenbord of door op het actiepictogram van de extensie te klikken. Pop-ups sluiten automatisch wanneer de gebruiker zich op een deel van de browser buiten de pop-up concentreert. Er is geen manier om de pop-up open te houden nadat de gebruiker heeft weggeklikt.
De volgende afbeelding, afkomstig uit het voorbeeld van het Drink Water-evenement , toont een pop-up met de beschikbare timeropties. Gebruikers stellen een alarm in door op een van de knoppen te klikken.
Registreer een pop-up in het manifest onder de "action" -toets.
{
"name": "Drink Water Event",
...
"action": {
"default_popup": "popup.html"
}
...
}
Implementeer de pop-up zoals u bijna elke andere webpagina zou doen. Houd er rekening mee dat elk JavaScript dat in een pop-up wordt gebruikt, in een afzonderlijk bestand moet staan.
<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>
U kunt pop-ups ook dynamisch maken door action.setPopup() aan te roepen.
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'});
}
});