Un popup è un'azione che mostra una finestra che consente agli utenti di richiamare più funzionalità delle estensioni. Viene attivato da una scorciatoia da tastiera o facendo clic sull'icona di azione dell'estensione. I popup si chiudono automaticamente quando l'utente si concentra su una parte del browser esterna al popup. Non c'è modo di tenere il popup aperto dopo che l'utente ha fatto clic per uscire.
L'immagine seguente, tratta dall'esempio di evento con acqua potabile, mostra un popup che mostra le opzioni disponibili per il timer. Gli utenti impostano una sveglia facendo clic su uno dei pulsanti.
Registra un popup nel file manifest sotto la chiave "action".
{
"name": "Drink Water Event",
...
"action": {
"default_popup": "popup.html"
}
...
}
Implementa il popup come faresti con qualsiasi altra pagina web. Tieni presente che tutto il codice JavaScript utilizzato in un popup deve essere 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().
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'});
}
});