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 ou en cliquant sur l'icône d'action de l'extension. Les fenêtres pop-up se ferment automatiquement lorsque l'utilisateur sélectionne une partie du navigateur en dehors de celles-ci. Il n'est pas possible de garder la fenêtre pop-up ouverte une fois que l'utilisateur a quitté le site.
L'image ci-dessous, issue de l'exemple Événement lié à la consommation d'eau, montre un pop-up affichant les options de minuteur disponibles. Les utilisateurs règlent 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 une fenêtre 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().
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'});
}
});