弹出式窗口是一项操作,用于显示可让用户调用多个扩展程序功能的窗口。该扩展程序可通过键盘快捷键或点击扩展程序的操作图标触发。当用户聚焦于弹出式窗口之外的浏览器某个部分时,弹出式窗口会自动关闭。在用户点击离开后,无法使弹出式窗口保持打开状态。
下图摘自饮水事件示例,显示了一个包含可用计时器选项的弹出式窗口。用户可以通过点击其中一个按钮设置闹钟。
<ph type="x-smartling-placeholder">![弹出式窗口示例。](https://developer.chrome.google.cn/static/docs/extensions/develop/ui/add-popup/image/popup.png?authuser=9&hl=da)
在清单中的 "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'});
}
});