Voeg een pop-up toe

Een pop-up is een actie die een venster weergeeft waarmee gebruikers verschillende functies van een extensie kunnen oproepen. Het wordt geactiveerd door een sneltoets, door op het actie-icoon van de extensie te klikken of door browser.action.openPopup() aan te roepen. Pop-ups sluiten automatisch wanneer de gebruiker de focus op een ander deel van de browser buiten de pop-up richt. Er is geen manier om de pop-up open te houden nadat de gebruiker ergens anders heeft geklikt.

De volgende afbeelding, afkomstig uit het voorbeeld van het Drink Water Event , toont een pop-upvenster met beschikbare timeropties. Gebruikers stellen een alarm in door op een van de knoppen te klikken.

Registreer een pop-up in het manifest onder de sleutel "action" .

{
 "name": "Drink Water Event",
 ...
 "action": {
   "default_popup": "popup.html"
 }
 ...
}

Implementeer de pop-up op dezelfde manier als vrijwel elke andere webpagina. Houd er rekening mee dat alle JavaScript-code die in een pop-up wordt gebruikt, in een apart 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>

Je kunt ook dynamisch pop-ups maken door action.setPopup() aan te roepen.

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'});
  }
});