Cómo agregar una ventana emergente

Una ventana emergente es una acción que muestra una ventana que permite a los usuarios invocar varias funciones de extensión. Se activa con una combinación de teclas o cuando se hace clic en el ícono de acción de la extensión. Las ventanas emergentes se cierran automáticamente cuando el usuario se centra en alguna parte del navegador fuera de la ventana emergente. No hay forma de mantener la ventana emergente abierta después de que el usuario hace clic para salir.

En la siguiente imagen, tomada de la muestra del evento de agua que bebe, se muestra una ventana emergente con las opciones disponibles para el temporizador. Los usuarios deben hacer clic en uno de los botones para configurar una alarma.

Un ejemplo de una ventana emergente.
Ejemplo de una ventana emergente.

Registra una ventana emergente en el manifiesto debajo de la clave "action".

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

Implementa la ventana emergente como lo harías en casi cualquier otra página web. Ten en cuenta que todo JavaScript que se use en una ventana emergente debe estar en un archivo separado.

<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>

También puedes llamar a action.setPopup() para crear ventanas emergentes de forma dinámica.

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