ポップアップとは、ユーザーが複数の拡張機能を呼び出せるウィンドウを表示するアクションです。キーボード ショートカットによって、または拡張機能のアクション アイコンをクリックしてトリガーされます。ポップアップは、ユーザーがブラウザのポップアップ以外の部分にフォーカスすると、自動的に閉じます。ユーザーがクリックした後にポップアップを開いたままにする方法はありません。
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'});
}
});