新增彈出式視窗

彈出式視窗是一種動作，會顯示視窗，讓使用者叫用多項擴充功能。只要使用鍵盤快速鍵、點選擴充功能的動作圖示或呼叫 browser.action.openPopup()，就能觸發這項功能。當使用者將焦點放在彈出式視窗以外的瀏覽器部分時，彈出式視窗會自動關閉。使用者點選其他位置後，彈出式視窗就會關閉，無法保持開啟狀態。

下圖取自「Drink Water Event」範例，顯示可用的計時器選項彈出式視窗。使用者按一下其中一個按鈕即可設定鬧鐘。

彈出式視窗示例。
彈出式視窗範例。

在資訊清單的 "action" 鍵下註冊彈出式視窗。

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

實作彈出式視窗，就像實作其他網頁一樣。請注意，彈出式視窗中使用的任何 JavaScript 都必須放在個別檔案中。

<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'});
  }
});