Un pop-up est une action qui affiche une fenêtre permettant aux utilisateurs d'appeler plusieurs fonctionnalités d'extension. Il est déclenché par un raccourci clavier, en cliquant sur l'icône d'action de l'extension ou en appelant browser.action.openPopup(). Les pop-ups se ferment automatiquement lorsque l'utilisateur sélectionne une partie du navigateur en dehors de la pop-up. Il n'est pas possible de laisser le pop-up ouvert une fois que l'utilisateur a cliqué en dehors.
L'image suivante, extraite de l'exemple Drink Water Event, montre un pop-up affichant les options de minuteur disponibles. Les utilisateurs définissent une alarme en cliquant sur l'un des boutons.
Enregistrez un pop-up dans le fichier manifeste sous la clé "action".
{
"name": "Drink Water Event",
...
"action": {
"default_popup": "popup.html"
}
...
}
Implémentez le pop-up comme vous le feriez pour n'importe quelle autre page Web. Notez que tout code JavaScript utilisé dans un pop-up doit se trouver dans un fichier distinct.
<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>
Vous pouvez également créer des pop-ups de manière dynamique en appelant 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'});
}
});