Menambahkan pop-up

Pop-up adalah tindakan yang menampilkan jendela yang memungkinkan pengguna memanggil beberapa fitur ekstensi. Fitur ini dipicu oleh pintasan keyboard, dengan mengklik ikon tindakan ekstensi, atau dengan memanggil browser.action.openPopup(). Pop-up akan otomatis ditutup saat pengguna memfokuskan sebagian browser di luar pop-up. Tidak ada cara untuk menjaga agar pop-up tetap terbuka setelah pengguna mengklik di luar pop-up.

Gambar berikut, yang diambil dari contoh Peristiwa Minum Air, menampilkan pop-up yang menampilkan opsi timer yang tersedia. Pengguna menyetel alarm dengan mengklik salah satu tombol.

Contoh pop-up.
Contoh pop-up.

Daftarkan pop-up dalam manifes di bagian kunci "action".

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

Terapkan pop-up seperti yang Anda lakukan pada hampir semua halaman web lainnya. Perhatikan bahwa JavaScript apa pun yang digunakan dalam pop-up harus berada dalam file terpisah.

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

Anda juga dapat membuat pop-up secara dinamis dengan memanggil 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'});
  }
});