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 con una combinación de teclas, haciendo clic en el ícono de acción de la extensión o llamando a browser.action.openPopup(). Las ventanas emergentes se cierran automáticamente cuando el usuario se enfoca 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 fuera de ella.
En la siguiente imagen, tomada del ejemplo de Evento de beber agua, se muestra una ventana emergente con las opciones de temporizador disponibles. Los usuarios hacen clic en uno de los botones para configurar una alarma.
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 casi 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().
browser.storage.local.get('signed_in', (data) => {
if (data.signed_in) {
browser.action.setPopup({popup: 'popup.html'});
} else {
browser.action.setPopup({popup: 'popup_sign_in.html'});
}
});