Concevoir l'interface utilisateur

L'interface utilisateur de l'extension doit être utile et minimaliste. Comme les extensions elles-mêmes, l'interface utilisateur doit personnaliser ou améliorer l'expérience de navigation sans la perturber.

Ce guide présente les fonctionnalités obligatoires et facultatives de l'interface utilisateur. Il vous explique comment et quand implémenter différents éléments d'interface utilisateur dans une extension.

Activer l'extension sur toutes les pages

Utilisez un browser_action lorsque les fonctionnalités d'une extension sont fonctionnelles dans la plupart des situations.

Enregistrer l'action du navigateur

Le champ "browser_action" est enregistré dans le fichier manifeste.

{
  "name": "My Awesome browser_action Extension",
  ...
  "browser_action": {
    ...
  }
  ...
}

La déclaration de "browser_action" permet de conserver la couleur de l'icône, ce qui indique que l'extension est disponible pour les utilisateurs.

Ajouter un badge

Les badges affichent une bannière colorée comportant jusqu'à quatre caractères au-dessus de l'icône du navigateur. Ils ne peuvent être utilisés 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 d'événement Drink Water (Boire de l'eau) affiche un badge avec "ON" pour indiquer à l'utilisateur qu'il a bien défini une alarme et n'affiche rien lorsque l' extension est inactive.

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 certaines pages

Utilisez page_action lorsque les fonctionnalités d'une extension ne sont disponibles que dans des circonstances définies.

Déclarer l'action de la page

Le champ "page_action" est enregistré dans le fichier manifeste.

{
  "name": "My Awesome page_action Extension",
  ...
  "page_action": {
    ...
  }
  ...
}

La déclaration de "page_action" ne colorise l'icône que lorsque l'extension est disponible pour les utilisateurs. Sinon, elle s'affiche en niveaux de gris.

Définir des règles pour activer l'extension

Définissez des règles pour déterminer quand l'extension est utilisable en appelant chrome.declarativeContent sous l' runtime.onInstalled dans un script d'arrière-plan. L'exemple d'extension Page action by URL (Action de la 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 utilisant "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 analyse une page Web pour y trouver une adresse et affiche son emplacement sur une carte statique dans la fenêtre pop-up. Comme 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. En revanche, si une adresse est trouvée sur une page, elle appelle pageAction.show pour coloriser l'icône et indiquer 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 de l'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. Toutefois, tous les formats compatibles avec WebKit, y compris BMP, GIF, ICO et JPEG, sont acceptés.

Désigner les icônes de la barre d'outils

Les icônes spécifiques à la barre d'outils sont enregistrées dans le "default_icon" field under browser_action or page_action dans le fichier manifeste. Il est recommandé d'inclure plusieurs tailles pour s'adapter à l'espace de 16 dip. Nous vous recommandons d'utiliser au minimum les tailles 16x16 et 32x32.

{
  "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, sinon 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 une utilisation en dehors de la barre d'outils.

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

Une fenêtre 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. Une fenêtre pop-up fonctionne de manière très similaire à une page Web. Elle peut contenir des liens vers des feuilles de style et des balises de script, mais n'autorise pas le code JavaScript intégré.

L'exemple de fenêtre pop-up de l'événement Drink Water (Boire de l'eau) affiche les options de minuteur disponibles. Les utilisateurs définissent 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>

La fenêtre pop-up peut être enregistrée dans le fichier manifeste, sous l'action du navigateur ou l'action de la page.

{
  "name": "Drink Water Event",
  ...
  "browser_action": {
    "default_popup": "popup.html"
  }
  ...
}

Les fenêtres pop-up peuvent également être définies 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 des descriptions ou des instructions courtes aux utilisateurs lorsqu'ils pointent l'icône du navigateur.

Les info-bulles sont enregistrées dans le "default_title" champ browser_action ou page_action dans le 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ées sont implémentées avec l'internationalisation. Créez des répertoires pour héberger des messages spécifiques à une langue dans un dossier appelé _locales, comme suit :

• _locales/en/messages.json
• _locales/es/messages.json

Mettez en forme les messages dans le fichier messages.json de chaque langue.

{
  "__MSG_tooltip__": {
      "message": "Hello!",
      "description": "Tooltip Greeting."
  }
}

{
  "__MSG_tooltip__": {
      "message": "Hola!",
      "description": "Tooltip Greeting."
  }
}

Incluez le nom du message dans le champ de l'info-bulle au lieu du message pour activer la localisation.

{
"name": "Tab Flipper",
  ...
  "browser_action": {
    "default_title": "__MSG_tooltip__"
  }
...
}

Omnibox

Les utilisateurs peuvent appeler la fonctionnalité d'extension via l'omnibox. Incluez le champ "omnibox" dans le fichier manifeste et désignez un mot clé. L'exemple d'extension Omnibox New Tab Search (Recherche dans un nouvel onglet avec l'omnibox) utilise "nt" comme mot clé.

{
  "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 16x16 fournie est affichée en niveaux de gris 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 16x16 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 "Global Google Search" (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 associer à une combinaison de touches. Enregistrez une ou plusieurs commandes dans le fichier manifeste sous le "commands" champ.

{
  "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 des raccourcis de navigateur nouveaux ou alternatifs. L'exemple d'extension Tab Flipper écoute l'événement commands.onCommand dans le script d'arrière-plan et définit une fonctionnalité 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 association de touches qui fonctionne spécialement avec son extension. L'exemple Hello Extensions (Bonjour les extensions) fournit une commande permettant d'ouvrir la fenêtre 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 browser_action, elle peut spécifier "execute_browser_action" dans les commandes pour ouvrir le fichier pop-up sans inclure de script d'arrière-plan. Si vous utilisez page_action, vous pouvez le remplacer par "execute_page_action". Les commandes de navigateur et d'extension peuvent être utilisées dans la même extension.

Remplacer des pages

Une extension peut remplacer la page Web "Historique", "Nouvel onglet" ou "Favoris" par un fichier HTML personnalisé. Comme une fenêtre pop-up, elle peut inclure une logique et un style spécialisés, mais n'autorise pas le code JavaScript intégré. Une seule extension 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>