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

Cửa sổ bật lên là một hành động trong đó hiển thị một cửa sổ cho phép người dùng gọi nhiều tính năng của tiện ích. Hành động này được kích hoạt bằng phím tắt hoặc bằng cách nhấp vào biểu tượng hành động của tiện ích. Cửa sổ bật lên tự động đóng khi người dùng tập trung vào một số phần của trình duyệt bên ngoài cửa sổ bật lên. Không có cách nào để tiếp tục mở cửa sổ bật lên sau khi người dùng nhấp ra.

Hình ảnh sau đây, chụp từ mẫu Drink Water Event, cho thấy một cửa sổ bật lên hiển thị các lựa chọn hẹn giờ có sẵn. 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ề cửa sổ bật lên.

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

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

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

<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().

chrome.storage.local.get('signed_in', (data) => {
  if (data.signed_in) {
    chrome.action.setPopup({popup: 'popup.html'});
  } else {
    chrome.action.setPopup({popup: 'popup_sign_in.html'});
  }
});