Ce catalogue présente les éléments d'interface utilisateur disponibles dans les extensions. Chaque entrée contient les éléments suivants :
- Une image de l'élément (le cas échéant)
- Une description de son utilité
- Des éléments d'interface associés (le cas échéant)
- Des liens vers des instructions d'implémentation et des exemples de code
Ces éléments sont différentes manières d'appeler les fonctionnalités d'extension. Vous n'êtes pas obligé de les implémenter tous. En fait, certains cas d'utilisation peuvent ne pas en utiliser. Par exemple, un raccourcisseur de liens peut agir sur l'URL affichée à l'aide d'un raccourci clavier et placer le lien raccourci dans le presse-papiers par programmation.
Actions
Une action se produit lorsqu'un utilisateur clique sur l'icône d'action de votre extension. Une action peut soit appeler une fonctionnalité d'extension à l'aide de l'API Action, soit ouvrir une fenêtre pop-up permettant aux utilisateurs d'appeler plusieurs fonctionnalités d'extension. Indiquez aux utilisateurs ce que fait l'action à l'aide d'une info-bulle.
Pour apprendre à créer une action, consultez Implémenter une action ou examinez les exemples d'actions.
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 cette action appelle une fonctionnalité d'extension à l'aide de l'API Action ou ouvre une fenêtre pop-up.
Vous pouvez également ajouter un libellé, appelé ici "badge", à l'icône pour communiquer des informations telles que l'état de l'extension ou les actions requises par l'utilisateur.
Pour apprendre à créer une action, consultez Implémenter une action ou examinez les exemples d'actions.
Badges
Les badges sont des éléments de texte mis en forme placés au-dessus de l'icône d'action pour indiquer des informations telles que l'état de l'extension ou les actions 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 s'affiche pour le clic secondaire (souvent appelé clic droit) d'une souris. Définissez des menus contextuels à l'aide de l'API Context Menus.
Pour apprendre à implémenter un menu contextuel, consultez les exemples de menus contextuels.
Omnibox
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 que l'utilisateur voit dans l'omnibox. Définissez des mots clés dans le manifest.json et répondez-y à l'aide de l'API Omnibox.
Remplacer des pages
Une extension peut remplacer l'une de ces pages Chrome intégrées :
- Historique
- Nouvel onglet
- Bookmarks
Pour apprendre à remplacer des pages Chrome, consultez Remplacer des pages Chrome ou l'exemple de remplacement.
Fenêtres pop-up
Une fenêtre pop-up est une action qui affiche une fenêtre permettant aux utilisateurs d'appeler plusieurs fonctionnalités d'extension. Les fenêtres pop-up peuvent s'ouvrir si l'utilisateur clique sur l'icône d'action, à l'aide d'un raccourci clavier ou en appelant chrome.action.openPopup().
Pour apprendre à créer une fenêtre pop-up, consultez Ajouter une fenêtre pop-up. Vous pouvez également télécharger une procédure pas à pas à partir de l'un des exemples d'actions.
Panneaux latéraux
Un panneau latéral permet aux utilisateurs d'appeler des fonctionnalités d'extension à côté de pages Web (voir l'image). Un panneau latéral peut être associé à 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 des panneaux latéraux ou examinez les exemples de panneaux latéraux.
Info-bulles
Une info-bulle permet d'afficher, lorsqu'un utilisateur pointe la souris sur votre icône d'action, ce que fait l'action de votre extension. Par défaut, l'info-bulle affiche le nom de l'extension.
Pour apprendre à ajouter une info-bulle, utilisez le "default_title" membre de la clé "action" des fichiers manifest.
DevTools
Vous pouvez ajouter des panneaux personnalisés (ce que l'on appelle des onglets dans les outils de développement) aux outils de développement à l'aide de l'API DevTools Panels. D'autres API DevTools vous permettent de surveiller les fenêtres et le trafic 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 commencé sa vie 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 apprendre à utiliser les notifications, consultez Informer les utilisateurs.
Thèmes
Un thème est un type spécial d'extension qui modifie l'apparence du navigateur. Les thèmes sont empaquetés comme des extensions classiques, mais ils ne contiennent pas de code JavaScript ni HTML.
Pour apprendre à 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 qu'elles ne soient pas strictement nécessaires pour une extension de base, elles peuvent être des éléments importants de votre extension. Pour de nombreux utilisateurs, certaines de ces fonctionnalités sont absolument essentielles pour utiliser l'extension.
Accessibilité
Pour de nombreux utilisateurs, l'accessibilité est littéralement l'interface utilisateur, et 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 bases de l'accessibilité de votre extension.
Internationalisation
Adressez-vous aux utilisateurs dans leur propre langue. Apprenez à internationaliser l'interface.