Un popup è un'azione che mostra una finestra che consente agli utenti di richiamare più funzionalità dell'estensione. Viene attivato da una scorciatoia da tastiera, facendo clic sull'icona di azione dell'estensione o chiamando browser.action.openPopup(). I popup si chiudono automaticamente quando l'utente sposta lo stato attivo su una parte del browser al di fuori del popup. Non è possibile mantenere aperto il popup dopo che l'utente ha fatto clic al di fuori.
L'immagine seguente, tratta dall'esempio Evento Bevi acqua, mostra un popup con le opzioni di timer disponibili. Gli utenti impostano una sveglia facendo clic su uno dei pulsanti.
Registra un popup nel manifest sotto la chiave "action".
{
"name": "Drink Water Event",
...
"action": {
"default_popup": "popup.html"
}
...
}
Implementa il popup come faresti con quasi tutte le altre pagine web. Tieni presente che qualsiasi JavaScript utilizzato in un popup deve trovarsi in un file separato.
<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>
Puoi anche creare popup in modo dinamico chiamando action.setPopup().
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'});
}
});