Composants de l'interface utilisateur

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.

Figure 1: Extensions épinglées (à gauche) et retirées (à droite)

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.

Figure 2: Icône de l'extension du dictionnaire Google (en rouge).

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().

Figure 3: Une icône d'extension sans badge (à gauche) et avec badge (à droite)

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

Figure 4: Menu contextuel et sous-menu imbriqué

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.

Figure 5: omnibox du navigateur

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

Figure 6: Exemple de page d'historique personnalisée

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.

Figure 7: Exemple de pop-up

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.

Figure 8: Extension de dictionnaire définissant le mot "Extensions".

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.

Figure 9: Exemple d'info-bulle pour une icône d'action.

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.

Figure 10: Notification d'extension sur Mac

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.

Figure 11: Exemple de thème

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.