Aggiungi un popup

Un popup è un'azione che mostra una finestra in cui gli utenti possono richiamare più funzionalità dell'estensione. Viene attivato con una scorciatoia da tastiera o facendo clic sull'icona di azione dell'estensione. I popup si chiudono automaticamente quando l'utente imposta lo stato attivo su una parte del browser esterna al popup. Non è possibile tenere il popup aperto dopo che l'utente ha abbandonato il sito.

L'immagine seguente, tratta dall'esempio Evento di acqua potabile, mostra un popup che mostra le opzioni disponibili per il timer. Gli utenti impostano una sveglia facendo clic su uno dei pulsanti.

Un esempio di popup.
Un esempio di popup.

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 codice JavaScript utilizzato in un popup deve essere contenuto 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'});
  }
});