Una ventana emergente es una acción que muestra una ventana que permite a los usuarios invocar varias funciones de la extensión. Se activa mediante 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 sale de la página.
En la siguiente imagen, tomada de la muestra Evento de agua para beber, se muestra una ventana emergente con las opciones de temporizador disponibles. Los usuarios establecen una alarma con solo hacer clic en uno de los botones.
Registra una ventana emergente en el manifiesto con 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 el código JavaScript que aparezca 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'});
}
});