Adicionar um pop-up

Um pop-up é uma ação que mostra uma janela para os usuários invocarem vários recursos de extensão. Ele é acionado por um atalho de teclado, clicando no ícone de ação da extensão ou chamando browser.action.openPopup(). Os pop-ups são fechados automaticamente quando o usuário foca em alguma parte do navegador fora do pop-up. Não há como manter o pop-up aberto depois que o usuário clica fora dele.

A imagem a seguir, extraída do exemplo Evento de beber água, mostra um pop-up com as opções de timer disponíveis. Os usuários definem um alarme clicando em um dos botões.

Exemplo de um pop-up.
Exemplo de um pop-up.

Registre um pop-up no manifesto na chave "action".

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

Implemente o pop-up como faria com quase qualquer outra página da Web. Observação: todo 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>

Também é possível criar pop-ups dinamicamente chamando 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'});
  }
});