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, haciendo clic en el ícono de acción de la extensión o llamando a chrome.action.openPopup(). 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 en la que se muestran las opciones disponibles para el temporizador. Los usuarios hacen clic en uno de los botones para configurar una alarma.
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 con cualquier otra página web. Ten en cuenta que cualquier código JavaScript que se use en una ventana emergente debe estar en un archivo independiente.
<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 crear ventanas emergentes de forma dinámica llamando a 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'});
}
});