팝업은 사용자가 여러 확장 프로그램 기능을 호출할 수 있는 창을 표시하는 작업입니다. 단축키를 누르거나 확장 프로그램의 작업 아이콘을 클릭하거나 chrome.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()를 호출하여 팝업을 동적으로 만들 수도 있습니다.
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'}); } });