新增彈出式視窗

彈出式視窗是一種動作，當中會顯示視窗，讓使用者叫用多項擴充功能功能。它是由鍵盤快速鍵或擴充功能的動作圖示觸發。當使用者聚焦於彈出式視窗以外的部分時，彈出式視窗會自動關閉。使用者一旦離開，就無法讓彈出式視窗保持開啟。

下方圖片擷取自 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()，動態建立彈出式視窗。

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