Il s'agit d'un catalogue d'éléments de l'interface utilisateur disponibles dans les extensions. Chaque entrée contient:
- Une image de l'élément (le cas échéant).
- Description de son utilité.
- Éléments de l'interface associés (le cas échéant)
- Liens vers des instructions d'implémentation et des exemples de code
Ces éléments permettent d'appeler des fonctionnalités d'extension de différentes manières. Vous n'êtes pas obligé de tous les implémenter. En fait, certains cas d'utilisation peuvent n'en utiliser aucune. Par exemple, un lien plus court peut agir sur l'URL affichée à l'aide d'un raccourci clavier et placer automatiquement le lien raccourci dans le presse-papiers.
Actions
Une action se produit lorsqu'un utilisateur clique sur l'icône d'action de votre extension. Une action peut appeler une fonctionnalité d'extension à l'aide de l'API Action ou ouvrir un pop-up permettant aux utilisateurs d'appeler plusieurs fonctionnalités d'extension. Indiquez aux utilisateurs l'action à effectuer à l'aide d'une info-bulle.
Pour apprendre à créer une action, consultez Implémenter une action ou examinez les exemples d'action.
Icônes d'action
Une extension nécessite au moins une icône pour la représenter. Les utilisateurs cliquent sur l'icône pour appeler une action, que celle-ci invoque une fonctionnalité d'extension à l'aide de l'API Action ou ouvre un pop-up.
Vous pouvez également ajouter un libellé, appelé ici "badge", à l'icône pour indiquer, par exemple, l'état de l'extension ou une action requise de la part de l'utilisateur.
Pour apprendre à créer une action, consultez Implémenter une action ou examinez les exemples d'action.
Badges
Les badges sont des extraits de texte mis en forme placés au-dessus de l'icône d'action pour indiquer des éléments tels que l'état de l'extension ou que des actions sont requises par l'utilisateur. Vous pouvez définir le texte du badge en appelant chrome.action.setBadgeText() et la couleur de la bannière en appelant chrome.action.setBadgeBackgroundColor().
Pour apprendre à créer une action, consultez Implémenter une action ou l'exemple Boire de l'eau.
Commandes
Les commandes sont des combinaisons de touches qui appellent une fonctionnalité d'extension. Définissez des combinaisons de touches dans le fichier manifest.json et répondez-y à l'aide de l'API Commands.
Pour apprendre à implémenter une commande, consultez la documentation de référence de l'API ou l'exemple chrome.commands.
Menu contextuel
Un menu contextuel apparaît pour le clic alternatif (souvent appelé le clic droit) de la souris. Définir des menus contextuels à l'aide de l'API Context Menu
Pour savoir comment implémenter un menu contextuel, consultez les exemples de menu contextuel.
Champ polyvalent
Vous pouvez interagir avec les utilisateurs à l'aide de l'omnibox Chrome. Lorsqu'un utilisateur saisit des mots clés définis par l'extension dans l'omnibox, votre extension contrôle ce qu'il voit dans l'omnibox. Définissez les mots clés dans le fichier manifest.json et répondez-y à l'aide de l'API omnibox.
Pour savoir comment ignorer l'omnibox, consultez la page "Déclencher des actions à partir de l'omnibox" ou l'exemple de documentation de référence rapide de l'API.
Pages de remplacement
Une extension peut remplacer l'une des pages Chrome intégrées suivantes:
- Historique
- Nouvel onglet
- Bookmarks
Pour savoir comment remplacer les pages Chrome, consultez l'article Remplacer les pages Chrome ou l'exemple Remplacer.
Fenêtre pop-up
Un pop-up est une action qui affiche une fenêtre permettant aux utilisateurs d'appeler plusieurs fonctionnalités d'extension. Les pop-ups ne peuvent s'ouvrir que si l'utilisateur clique sur l'icône d'action. Impossible d'ouvrir la fenêtre pop-up d'une extension par programmation.
Pour savoir comment créer un pop-up, consultez Ajouter un pop-up. Vous pouvez également télécharger une étape de l'un des exemples d'actions.
Panneaux latéraux
Un panneau latéral permet aux utilisateurs d'invoquer des fonctionnalités d'extension à côté de pages Web (voir l'image). Un panneau latéral peut être attaché à un seul onglet ou à une fenêtre entière. Un panneau latéral est contrôlé à l'aide de l'API Side Panel.
Pour apprendre à créer un panneau latéral, consultez les cas d'utilisation de panneaux latérals ou les exemples.
Info-bulles
Une info-bulle vous permet d'indiquer ce que fait l'action de votre extension lorsqu'un utilisateur pointe dessus avec la souris sur votre icône d'action. Par défaut, l'info-bulle affiche le nom de l'extension.
Pour savoir comment ajouter une info-bulle, utilisez le membre "default_title" de la clé "action" des fichiers manifestes.
DevTools
Vous pouvez ajouter des panneaux personnalisés (onglets appelés "Outils de développement") aux outils de développement à l'aide de l'API DevTools Panels. D'autres API DevTools vous permettent de surveiller le trafic Windows et réseau. Vous pouvez également personnaliser le panneau de l'enregistreur des outils de développement. Le panneau Lighthouse des outils pour les développeurs Chrome a vu le jour en tant qu'extension des outils de développement.
Notifications
Publiez des messages dans la barre d'état système d'un utilisateur à l'aide de l'API Notifications des extensions ou de l'API Notifications des plates-formes Web.
Pour savoir comment utiliser les notifications, consultez Avertir les utilisateurs.
Thèmes
Un thème est un type d'extension spécial qui modifie l'apparence du navigateur. Les thèmes sont empaquetés comme des extensions standards, mais ils ne contiennent ni JavaScript, ni code HTML.
Pour découvrir comment créer un thème, consultez Que sont les thèmes ?.
Autres façons d'interagir avec les utilisateurs
Cette section décrit d'autres façons dont votre extension peut interagir avec les utilisateurs. Bien que cela ne soit pas strictement nécessaire pour une extension de base, ils peuvent constituer des éléments importants d'une extension. Pour de nombreux utilisateurs, certaines de ces fonctionnalités sont absolument essentielles à l'utilisation de l'extension.
Accessibilité
Pour de nombreux utilisateurs, l'accessibilité est littéralement l'interface utilisateur. Ses fonctionnalités peuvent souvent être utiles à ceux qui n'ont pas besoin de l'accessibilité comme moyen principal d'interagir avec votre extension. Découvrez les principes de base pour rendre une extension accessible.
Internationalisation
Adressez-vous aux utilisateurs dans leur propre langue. Découvrez comment internationaliser l'interface.