Concevoir l'interface utilisateur

L'interface utilisateur des extensions doit être pertinente et minimale. Tout comme les extensions, les L'UI doit personnaliser ou améliorer l'expérience de navigation sans perturber l'expérience de navigation.

Ce guide décrit les fonctionnalités requises et facultatives de l'interface utilisateur. Utilisez-la pour comprendre quand et comment pour 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, dans la plupart des cas, fonctionnelles.

Enregistrer une 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" conserve l'icône colorée, ce qui indique que l'extension est disponible pour utilisateurs.

Ajouter un badge

Les badges s'affichent dans une bannière colorée comportant jusqu'à quatre caractères au-dessus de l'icône du navigateur. Ils ne peuvent être utilisé par les extensions qui déclarent "browser_action" dans leur fichier manifeste.

Utilisez des badges pour indiquer l'état de l'extension. L'exemple Événement Eau potable affiche une avec la mention "ACTIVÉ" pour montrer à l'utilisateur qu'il a défini une alarme avec succès et n'affiche rien lorsque 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 certaines circonstances.

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'affichera en nuances de gris.

Définir les règles d'activation de l'extension

Définissez des règles d'utilisation de l'extension en appelant chrome.declarativeContent sous la Écouteur runtime.onInstalled dans un script en arrière-plan. Exemple Action sur 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 qui utilisent "page_action" peuvent s'activer et se désactiver dynamiquement en appelant pageAction.show et pageAction.hide.

L'exemple d'extension Mappy recherche une adresse sur une page Web et affiche sa position sur un 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. afin de prédire les pages qui seront pertinentes. À la place, si une adresse est trouvée sur une page, elle appelle pageAction.show pour colorer l'icône et signaler que l'extension peut être utilisée 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 des extensions

Les extensions nécessitent au moins une icône pour la représenter. Fournissez des icônes au format PNG pour des résultats visuels, bien que tous les formats pris en charge par WebKit, notamment BMP, GIF, ICO et JPEG, soient accepté.

Attribuer des icônes à 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. Inclure plusieurs tailles est encouragé à évoluer pour l'espace de 16 creux. Les tailles 16 x 16 et 32 x 32 sont recommandées.

{
  "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 peuvent être déformées. Si aucune icône n'est fournie, Chrome ajoute une un 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 d'interface utilisateur supplémentaires

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 façon très semblable à une page Web. il peut contenir des liens vers des feuilles de style et des tags de script, mais n'autorise pas le code JavaScript intégré.

Exemple de pop-up Événement Eau potable affichant les options de minuteur disponibles. Les utilisateurs règlent une alarme par en cliquant sur l'un des boutons proposés.

<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 l'action du navigateur ou 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 de brèves descriptions ou instructions aux utilisateurs lorsqu'ils pointent sur le navigateur .

Les info-bulles sont enregistrées dans le champ "default_title" 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"
  }
...
}

Vous pouvez également définir ou mettre à jour les info-bulles 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éer des répertoires pour messages spécifiques à la langue maison dans un dossier nommé _locales, comme ceci:

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

Mettez en forme les messages dans les 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 d'info-bulle au lieu du message pour activer la localisation.

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

Champ polyvalent

Les utilisateurs peuvent appeler des fonctionnalités d'extension via l'omnibox. Incluez le champ "omnibox" dans le fichier manifeste et désigner un mot clé. L'exemple d'extension Recherche dans un nouvel onglet avec l'Omnibox utilise "nt" en tant que le 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, elle active l'extension. Pour le signaler à l'utilisateur, L'icône 16 x 16 fournie est grisée et s'affiche dans l'omnibox à côté du nom de l'extension.

L'extension écoute l'événement omnibox.onInputEntered. Après son déclenchement, ouvre un nouvel onglet contenant une recherche Google de 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 du menu.

Créez un menu contextuel en appelant contextMenus.create dans le script en arrière-plan. Ce doit être effectué 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 replie automatiquement en un seul menu parent.

Commandes

Les extensions peuvent définir des commandes spécifiques et les lier à une combinaison de touches. Enregistrez-en un ou d'autres 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"
    }
  }
  ...
}

Vous pouvez utiliser des commandes pour fournir des raccourcis de navigateur nouveaux ou alternatifs. Exemple d'utilisation de Tab Flipper écoute l'événement commands.onCommand dans le script d'arrière-plan et définit 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écifiquement avec son extension. L'exemple Hello Extensions donne 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, il peut être remplacé par "execute_page_action". Navigateur et extension peuvent être utilisées dans la même extension.

Pages de remplacement

Une extension peut remplacer la page Web "Historique", "Nouvel onglet" ou "Favoris" par une balise fichier HTML personnalisé. Comme un pop-up, il peut inclure une logique et un style spécialisés, mais il ne permet pas du code JavaScript intégré. Une extension unique permet de remplacer une seule des trois pages possibles.

Enregistre 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" lorsque vous remplacez ces .

<html>
  <head>
  <title>New Tab</title>
  </head>
  <body>
    <h1>Hello World</h1>
  <script src="logic.js"></script>
  </body>
</html>