पॉप-अप एक ऐसी कार्रवाई है जिससे एक विंडो दिखती है. इससे उपयोगकर्ता, एक्सटेंशन की कई सुविधाओं का इस्तेमाल कर सकते हैं. इसे कीबोर्ड शॉर्टकट का इस्तेमाल करके, एक्सटेंशन के ऐक्शन आइकॉन पर क्लिक करके या browser.action.openPopup() को कॉल करके ट्रिगर किया जा सकता है. जब उपयोगकर्ता, ब्राउज़र के किसी ऐसे हिस्से पर फ़ोकस करता है जो पॉप-अप के बाहर है, तो पॉप-अप अपने-आप बंद हो जाते हैं. उपयोगकर्ता के क्लिक करने के बाद, पॉप-अप को खुला रखने का कोई तरीका नहीं है.
पानी पीने के इवेंट के सैंपल से ली गई इस इमेज में, टाइमर के उपलब्ध विकल्पों को दिखाने वाला पॉप-अप दिखाया गया है. उपयोगकर्ता, किसी बटन पर क्लिक करके अलार्म सेट करते हैं.
"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() को कॉल करके, डाइनैमिक तौर पर पॉप-अप भी बनाए जा सकते हैं.
browser.storage.local.get('signed_in', (data) => {
if (data.signed_in) {
browser.action.setPopup({popup: 'popup.html'});
} else {
browser.action.setPopup({popup: 'popup_sign_in.html'});
}
});