Dodaj wyskakujące okienko

Wyskakujące okienko to działanie, które wyświetla okno umożliwiające użytkownikom korzystanie z wielu funkcji rozszerzenia. Aktywuje się go za pomocą skrótu klawiszowego, klikając ikonę działania rozszerzenia lub wywołując browser.action.openPopup(). Wyskakujące okienka zamykają się automatycznie, gdy użytkownik skupi się na części przeglądarki poza wyskakującym okienkiem. Nie ma możliwości pozostawienia wyskakującego okienka otwartego po kliknięciu przez użytkownika poza nim.

Obraz poniżej pochodzi z przykładowego zdarzenia Drink Water Event i przedstawia wyskakujące okienko z dostępnymi opcjami timera. Użytkownicy ustawiają alarm, klikając jeden z przycisków.

Przykład wyskakującego okienka.
Przykład wyskakującego okienka.

Zarejestruj wyskakujące okienko w pliku manifestu pod kluczem "action".

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

Zaimplementuj wyskakujące okienko tak jak w przypadku niemal każdej innej strony internetowej. Pamiętaj, że każdy kod JavaScript użyty w wyskakującym okienku musi znajdować się w osobnym pliku.

<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>

Możesz też tworzyć wyskakujące okienka dynamicznie, wywołując funkcję 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'});
  }
});