Um pop-up é uma ação que mostra uma janela que permite aos usuários invocar vários recursos de extensão. Ela é acionada por um atalho de teclado ou pelo clique no ícone de ação da extensão. Os pop-ups são fechados automaticamente quando o usuário foca em uma parte do navegador fora deles. Não será possível manter o pop-up aberto depois que o usuário sair.
A imagem a seguir, retirada do exemplo Drink Water Event, mostra um pop-up exibindo as opções de timer disponíveis. Os usuários definem um alarme clicando em um dos botões.
Registre um pop-up no manifesto na chave "action".
{
"name": "Drink Water Event",
...
"action": {
"default_popup": "popup.html"
}
...
}
Implemente o pop-up da mesma forma que faria com qualquer outra página da Web. Qualquer JavaScript usado em um pop-up precisa estar em um arquivo 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>
Você também pode criar pop-ups de forma dinâmica chamando 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'});
}
});