L'interface utilisateur de l'extension doit être pertinente et minimale. Tout comme les extensions elles-mêmes, l'UI doit personnaliser ou améliorer l'expérience de navigation sans la perturber.
Ce guide décrit les fonctionnalités obligatoires et facultatives de l'interface utilisateur. Utilisez-le pour comprendre quand et comment implémenter différents éléments d'interface utilisateur dans une extension.
Activer l'extension sur toutes les pages
Utilisez browser_action lorsque les fonctionnalités d'une extension sont fonctionnelles dans la plupart des cas.
Enregistrer une action de navigateur
Le champ "browser_action" est enregistré dans le fichier manifeste.
{
"name": "My Awesome browser_action Extension",
...
"browser_action": {
...
}
...
}
Lorsque vous déclarez "browser_action", l'icône reste colorée, ce qui indique que l'extension est disponible pour les utilisateurs.
Ajouter un badge
Les badges affichent une bannière colorée composée de quatre caractères au maximum au-dessus de l'icône du navigateur. Elles ne peuvent être utilisées que par les extensions qui déclarent "browser_action" dans leur fichier manifeste.
Utilisez des badges pour indiquer l'état de l'extension. L'exemple Boire de l'eau affiche un badge "ACTIVÉ" pour indiquer à l'utilisateur qu'il a bien défini une alarme. Lorsque l'extension est inactive, rien ne s'affiche.
Définissez le texte du badge en appelant chrome.browserAction.setBadgeText et la couleur de la bannière en appelant chrome.browserAction.setBadgeBackgroundColor .
chrome.browserAction.setBadgeText({text: 'ON'});
chrome.browserAction.setBadgeBackgroundColor({color: '#4688F1'});
Activer l'extension sur les pages sélectionnées
Utilisez page_action lorsque les fonctionnalités d'une extension ne sont disponibles que sous certaines conditions.
Déclarer une action sur la page
Le champ "page_action" est enregistré dans le fichier manifeste.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
...
}
...
}
Déclarer "page_action" ne colore l'icône que lorsque l'extension est disponible pour les utilisateurs. Sinon, elle s'affiche en nuances de gris.
Définir des règles d'activation de l'extension
Définissez des règles déterminant quand l'extension est utilisable en appelant chrome.declarativeContent sous l'écouteur runtime.onInstalled dans un script d'arrière-plan. L'exemple d'extension Page Action by URL (Action de page par URL) définit une condition selon laquelle l'URL doit inclure un "g". Si la condition est remplie, l'extension appelle declarativeContent.ShowPageAction().
chrome.runtime.onInstalled.addListener(function() {
// Replace all rules ...
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// With a new rule ...
chrome.declarativeContent.onPageChanged.addRules([
{
// That fires when a page's URL contains a 'g' ...
conditions: [
new chrome.declarativeContent.PageStateMatcher({
pageUrl: { urlContains: 'g' },
})
],
// And shows the extension's page action.
actions: [ new chrome.declarativeContent.ShowPageAction() ]
}
]);
});
});
Activer ou désactiver l'extension
Les extensions qui utilisent "page_action" peuvent être activées et désactivées de manière dynamique en appelant pageAction.show et pageAction.hide.
L'exemple d'extension Mappy recherche une adresse sur une page Web et indique son emplacement sur une carte statique dans le pop-up. Étant donné que l'extension dépend du contenu de la page, elle ne peut pas déclarer de règles pour prédire les pages qui seront pertinentes. À la place, si une adresse est détectée sur une page, elle appelle pageAction.show pour colorer l'icône et signaler que l'extension est utilisable dans cet onglet.
chrome.runtime.onMessage.addListener(function(req, sender) {
chrome.storage.local.set({'address': req.address})
chrome.pageAction.show(sender.tab.id);
chrome.pageAction.setTitle({tabId: sender.tab.id, title: req.address});
});
Fournir les icônes d'extension
Les extensions nécessitent au moins une icône pour les représenter. Fournissez des icônes au format PNG pour obtenir les meilleurs résultats visuels, bien que tout format compatible avec WebKit, y compris BMP, GIF, ICO et JPEG soit accepté.
Attribuer des icônes dans la barre d'outils
Les icônes spécifiques à la barre d'outils sont enregistrées dans le champ "default_icon" sous browser_action ou page_action dans le fichier manifeste. Il est recommandé d'inclure plusieurs tailles pour s'adapter à l'espace de 16 pfondeurs. Les tailles minimales recommandées sont 16 x 16 et 32 x 32.
{
"name": "My Awesome page_action Extension",
...
"page_action": {
"default_icon": {
"16": "extension_toolbar_icon16.png",
"32": "extension_toolbar_icon32.png"
}
}
...
}
Toutes les icônes doivent être carrées, sans quoi elles risquent d'être déformées. Si aucune icône n'est fournie, Chrome en ajoute une générique à la barre d'outils.
Créer et enregistrer des icônes supplémentaires
Incluez des icônes supplémentaires dans les tailles suivantes pour les utilisations en dehors de la barre d'outils.
| Taille de l'icône | Utilisation de l'icône |
|---|---|
| 16x16 | favicon sur les pages de l'extension |
| 32x32 | Les ordinateurs Windows exigent souvent cette taille. Cela évite que la distorsion de la taille réduise l'option 48 x 48. |
| 48x48 | s'affiche sur la page de gestion des extensions ; |
| 128x128 | s'affiche lors de l'installation et dans le Chrome Web Store |
Enregistrez les icônes dans le fichier manifeste sous le champ "icons".
{
"name": "My Awesome Extension",
...
"icons": {
"16": "extension_icon16.png",
"32": "extension_icon32.png",
"48": "extension_icon48.png",
"128": "extension_icon128.png"
}
...
}
Fonctionnalités supplémentaires de l'interface utilisateur
Fenêtre pop-up
Un pop-up est un fichier HTML qui s'affiche dans une fenêtre spéciale lorsque l'utilisateur clique sur l'icône de la barre d'outils. Un pop-up fonctionne de manière très semblable à une page Web. Il peut contenir des liens vers des feuilles de style et des balises de script, mais il n'autorise pas le code JavaScript intégré.
L'exemple de pop-up Boire de l'eau affiche les options de minuteur disponibles. Les utilisateurs règlent une alarme en cliquant sur l'un des boutons fournis.
<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='15min' value='15'>15 Minutes</button>
<button id='30min' value='30'>30 Minutes</button>
<button id='cancelAlarm'>Cancel Alarm</button>
<script src="popup.js"></script>
</body>
</html>
Le pop-up peut être enregistré dans le fichier manifeste, sous "Action du navigateur" ou "Action sur la page".
{
"name": "Drink Water Event",
...
"browser_action": {
"default_popup": "popup.html"
}
...
}
Vous pouvez également définir les fenêtres pop-up de manière dynamique en appelant browserAction.setPopup ou pageAction.setPopup.
chrome.storage.local.get('signed_in', function(data) {
if (data.signed_in) {
chrome.browserAction.setPopup({popup: 'popup.html'});
} else {
chrome.browserAction.setPopup({popup: 'popup_sign_in.html'});
}
});
Info-bulle
Utilisez une info-bulle pour fournir de brèves descriptions ou instructions aux utilisateurs lorsqu'ils passent la souris sur l'icône du navigateur.
Les info-bulles sont enregistrées dans le champ "default_title" browser_action ou page_action du fichier manifeste.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
}
...
}
Les info-bulles peuvent également être définies ou mises à jour en appelant browserAction.setTitle et pageAction.setTitle.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.setTitle({tabId: tab.id, title: "You are on tab:" + tab.id});
});
Les chaînes de paramètres régionaux spécialisés sont implémentées avec l'internationalisation. Créez des répertoires pour héberger des messages spécifiques à chaque langue dans un dossier appelé _locales, comme ceci:
_locales/en/messages.json_locales/es/messages.json
Mettez en forme les messages dans le messages.json de chaque langue.
{
"__MSG_tooltip__": {
"message": "Hello!",
"description": "Tooltip Greeting."
}
}
{
"__MSG_tooltip__": {
"message": "Hola!",
"description": "Tooltip Greeting."
}
}
Pour activer la localisation, incluez le nom du message dans le champ de l'info-bulle au lieu du message.
{
"name": "Tab Flipper",
...
"browser_action": {
"default_title": "__MSG_tooltip__"
}
...
}
Champ polyvalent
Les utilisateurs peuvent appeler une fonctionnalité d'extension via l'omnibox. Incluez le champ "omnibox" dans le fichier manifeste et désignez un mot clé. L'exemple d'extension Recherche dans un nouvel onglet de l'omnibox utilise le mot clé "nt".
{
"name": "Omnibox New Tab Search",\
...
"omnibox": { "keyword" : "nt" },
"default_icon": {
"16": "newtab_search16.png",
"32": "newtab_search32.png"
}
...
}
Lorsque l'utilisateur saisit "nt" dans l'omnibox, l'extension est activée. Pour le signaler à l'utilisateur, l'icône 16 x 16 fournie est grisée et incluse dans l'omnibox à côté du nom de l'extension.
L'extension écoute l'événement omnibox.onInputEntered. Une fois déclenchée, l'extension ouvre un nouvel onglet contenant une recherche Google pour l'entrée de l'utilisateur.
chrome.omnibox.onInputEntered.addListener(function(text) {
// Encode user input for special characters , / ? : @ & = + $ #
var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
chrome.tabs.create({ url: newURL });
});
Menu contextuel
Ajoutez de nouvelles options de menu contextuel en accordant l'autorisation "contextMenus" dans le fichier manifeste.
{
"name": "Global Google Search",
...
"permissions": [
"contextMenus",
"storage"
],
"icons": {
"16": "globalGoogle16.png",
"48": "globalGoogle48.png",
"128": "globalGoogle128.png"
}
...
}
L'icône 16 x 16 s'affiche à côté de la nouvelle entrée de menu.
Créez un menu contextuel en appelant contextMenus.create dans le script d'arrière-plan. Cette opération doit être effectuée sous l'événement d'écouteur runtime.onInstalled.
chrome.runtime.onInstalled.addListener(function() {
for (let key of Object.keys(kLocales)) {
chrome.contextMenus.create({
id: key,
title: kLocales[key],
type: 'normal',
contexts: ['selection'],
});
}
});
const kLocales = {
'com.au': 'Australia',
'com.br': 'Brazil',
'ca': 'Canada',
'cn': 'China',
'fr': 'France',
'it': 'Italy',
'co.in': 'India',
'co.jp': 'Japan',
'com.ms': 'Mexico',
'ru': 'Russia',
'co.za': 'South Africa',
'co.uk': 'United Kingdom'
};
L'exemple de menu contextuel de la recherche Google globale crée plusieurs options à partir de la liste dans locales.js . Lorsqu'une extension contient plusieurs menus contextuels, Google Chrome les réduit automatiquement en un seul menu parent.
Commandes
Les extensions peuvent définir des commandes spécifiques et les lier à une combinaison de touches. Enregistrez une ou plusieurs commandes dans le fichier manifeste sous le champ "commands".
{
"name": "Tab Flipper",
...
"commands": {
"flip-tabs-forward": {
"suggested_key": {
"default": "Ctrl+Shift+Right",
"mac": "Command+Shift+Right"
},
"description": "Flip tabs forward"
},
"flip-tabs-backwards": {
"suggested_key": {
"default": "Ctrl+Shift+Left",
"mac": "Command+Shift+Left"
},
"description": "Flip tabs backwards"
}
}
...
}
Les commandes peuvent être utilisées pour fournir de nouveaux raccourcis ou d'autres raccourcis dans le navigateur. L'exemple d'extension Tab Flipper écoute l'événement commands.onCommand dans le script d'arrière-plan et définit les fonctionnalités pour chaque combinaison enregistrée.
chrome.commands.onCommand.addListener(function(command) {
chrome.tabs.query({currentWindow: true}, function(tabs) {
// Sort tabs according to their index in the window.
tabs.sort((a, b) => { return a.index < b.index; });
let activeIndex = tabs.findIndex((tab) => { return tab.active; });
let lastTab = tabs.length - 1;
let newIndex = -1;
if (command === 'flip-tabs-forward')
newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
else // 'flip-tabs-backwards'
newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
});
});
Les commandes peuvent également créer une combinaison de touches qui fonctionne spécialement avec son extension. L'exemple Hello Extensions fournit une commande pour ouvrir le pop-up.
{
"name": "Hello Extensions",
"description" : "Base Level Extension",
"version": "1.0",
"browser_action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
},
"manifest_version": 2,
"commands": {
"_execute_browser_action": {
"suggested_key": {
"default": "Ctrl+Shift+F",
"mac": "MacCtrl+Shift+F"
},
"description": "Opens hello.html"
}
}
}
Comme l'extension définit un élément browser_action, elle peut spécifier "execute_browser_action" dans les commandes permettant d'ouvrir le fichier pop-up sans inclure de script d'arrière-plan. Si vous utilisez page_action, vous pouvez la remplacer par "execute_page_action". Les commandes de navigateur et d'extension peuvent être utilisées dans la même extension.
Pages de remplacement
Une extension peut remplacer et remplacer la page Web "Historique", "Nouvel onglet" ou "Favoris" par un fichier HTML personnalisé. Tout comme une fenêtre pop-up, elle peut inclure une logique et un style spécialisés, mais elle n'autorise pas le code JavaScript intégré. Une extension unique ne peut remplacer qu'une seule des trois pages possibles.
Enregistrez une page de remplacement dans le fichier manifeste sous le champ "chrome_url_overrides".
{
"name": "Awesome Override Extension",
...
"chrome_url_overrides" : {
"newtab": "override_page.html"
},
...
}
Le champ "newtab" doit être remplacé par "bookmarks" ou "history" lors du remplacement de ces pages.
<html>
<head>
<title>New Tab</title>
</head>
<body>
<h1>Hello World</h1>
<script src="logic.js"></script>
</body>
</html>