یک پنجره بازشو اضافه کنید

یک پنجره بازشو (popup) عملی است که یک پنجره را نمایش می‌دهد و به کاربران اجازه می‌دهد چندین ویژگی افزونه را فراخوانی کنند. این عمل توسط یک میانبر صفحه کلید، با کلیک روی نماد عملکرد افزونه یا با فراخوانی browser.action.openPopup() انجام می‌شود. وقتی کاربر روی بخشی از مرورگر خارج از پنجره بازشو تمرکز می‌کند، پنجره‌ها به طور خودکار بسته می‌شوند. هیچ راهی برای باز نگه داشتن پنجره پس از کلیک کاربر وجود ندارد.

تصویر زیر که از نمونه رویداد نوشیدن آب گرفته شده است، یک پنجره بازشو را نشان می‌دهد که گزینه‌های تایمر موجود را نمایش می‌دهد. کاربران با کلیک روی یکی از دکمه‌ها، زنگ هشدار را تنظیم می‌کنند.

یک پنجره‌ی پاپ‌آپ را در مانیفست، زیر کلید "action" ثبت کنید.

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

پنجره پاپ‌آپ را مانند تقریباً هر صفحه وب دیگری پیاده‌سازی کنید. توجه داشته باشید که هر جاوا اسکریپتی که در یک پنجره پاپ‌آپ استفاده می‌شود باید در یک فایل جداگانه باشد.

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

همچنین می‌توانید با فراخوانی 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'});
  }
});