पॉप-अप एक ऐसी कार्रवाई होती है जो एक विंडो दिखाती है. इस विंडो में उपयोगकर्ता, एक्सटेंशन की कई सुविधाएं शुरू कर सकते हैं. यह किसी कीबोर्ड शॉर्टकट या एक्सटेंशन के कार्रवाई आइकॉन पर क्लिक करने से ट्रिगर होता है. जब उपयोगकर्ता पॉप-अप के बाहर, ब्राउज़र के किसी हिस्से पर फ़ोकस करता है, तो पॉप-अप अपने-आप बंद हो जाते हैं. उपयोगकर्ता के क्लिक छोड़ने के बाद भी पॉप-अप को खुला नहीं रखा जा सकता.
नीचे दी गई इमेज, ड्रिंक वॉटर इवेंट के सैंपल से ली गई है. इसमें टाइमर के उपलब्ध विकल्पों को दिखाने वाला एक पॉप-अप दिख रहा है. उपयोगकर्ता किसी एक बटन पर क्लिक करके अलार्म सेट करते हैं.
मेनिफ़ेस्ट में "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'});
}
});