Options d’une extension Chrome

Notez que cet article a été écrit pour la première fois il y a plus de 2 ans, mais n'est pas nécessairement obsolète.

Pour permettre aux utilisateurs de personnaliser le comportement d’une extension Chrome, on voudra peut-être fournir une page d’options. On peut le faire dans une page d’options accessible par un clic droit sur l’icone de l’extension, ou sur la page des extensions.

Dans le cas présent, j’ai choisi de mettre les options dans la page popup.html, qui apparaît avec un clic sur l’icone de l’extension. Dans les deux cas, le stockage et la modification des données se feront de la même façon.

Options utilisateur d'une extension Chrome.
Options utilisateur d’une extension Chrome.

Pour ajouter des options modifiables par l’utilisateur dans une extension Chrome, il faut d’abord ajouter la permission storage au manifest.json. Cela permettra d’utiliser l’API de stockage de Chrome:

On construit alors la page d’options options.html, ou popup.html (pour montrer les options dans le popup). Dans le cas présent, il y a une liste de boutons radios et une case à cocher.

Le fichier javaScript popup.js se charge de définir les options par défaut et de sauvegarder les données de l’utilisateur.

Dans popup.html, il faut attendre le chargement du DOM. On écoute l’événement click sur les boutons radio et la boite à cocher. La fonction restore_options récupère les valeurs enregistrées de l’utilisateur (ou les valeurs par défaut), save_options sauvegarde les données lorsque l’utilisateur les modifie.

Et hop, de jolies options pour l’extension Chrome. La structure pour tout élément de formulaire reste la même.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.