Thêm cửa sổ bật lên

Cửa sổ bật lên là một thao tác hiển thị cửa sổ cho phép người dùng gọi nhiều tính năng của tiện ích. Bạn có thể kích hoạt tính năng này bằng phím tắt, bằng cách nhấp vào biểu tượng thao tác của tiện ích hoặc bằng cách gọi browser.action.openPopup(). Cửa sổ bật lên sẽ tự động đóng khi người dùng tập trung vào một phần nào đó của trình duyệt bên ngoài cửa sổ bật lên. Không có cách nào để giữ cửa sổ bật lên mở sau khi người dùng nhấp vào phần khác.

Hình ảnh sau đây (lấy từ mẫu Sự kiện uống nước) cho thấy một cửa sổ bật lên hiển thị các lựa chọn về bộ hẹn giờ hiện có. Người dùng đặt báo thức bằng cách nhấp vào một trong các nút.

Ví dụ về một cửa sổ bật lên.
Ví dụ về một cửa sổ bật lên.

Đăng ký một cửa sổ bật lên trong tệp kê khai theo khoá "action".

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

Triển khai cửa sổ bật lên như bạn vẫn làm với hầu hết mọi trang web khác. Xin lưu ý rằng mọi JavaScript được dùng trong cửa sổ bật lên đều phải nằm trong một tệp riêng biệt.

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

Bạn cũng có thể tạo cửa sổ bật lên một cách linh động bằng cách gọi 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'});
  }
});