彈出式視窗是一種動作,當中會顯示視窗,讓使用者叫用多項擴充功能功能。它是由鍵盤快速鍵或擴充功能的動作圖示觸發。當使用者聚焦於彈出式視窗以外的部分時,彈出式視窗會自動關閉。使用者一旦離開,就無法讓彈出式視窗保持開啟。
下方圖片擷取自 Drink Water Event 範例,其中顯示了顯示可用計時器選項的彈出式視窗。使用者只要點選其中一個按鈕來設定鬧鐘,
![彈出式視窗範例。](https://developer.chrome.google.cn/static/docs/extensions/develop/ui/add-popup/image/popup.png?authuser=5&hl=zh-tw)
在資訊清單中註冊 "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'});
}
});