Créer un menu contextuel

Un menu contextuel s'affiche pour le clic alternatif (souvent appelé clic droit) d'une souris. Pour créer un menu contextuel, ajoutez d'abord l'autorisation "contextMenus" au fichier manifest.json.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

Vous pouvez également utiliser la touche "icons" si vous souhaitez afficher une icône à côté d'un élément de menu. Dans cet exemple, l'élément de menu "Recherche globale Google" utilise une icône de 16 par 16.

<ph type="x-smartling-placeholder">
</ph> Élément de menu contextuel avec une icône de 16 par 16.
Élément de menu contextuel avec une icône de 16 x 16.

Le reste de cet exemple est tiré de l'exemple de menu contextuel de la recherche Google globale, qui propose plusieurs options de menu contextuel. Lorsqu'une extension contient plusieurs menus contextuels, Chrome les réduit automatiquement en un seul menu parent, comme illustré ci-dessous:

<ph type="x-smartling-placeholder">
</ph> Un menu contextuel imbriqué
Figure 4: Menu contextuel et sous-menu imbriqué

L'exemple montre cela en appelant contextMenus.create() dans le service worker d'extension. Les éléments du sous-menu sont importés à partir du fichier locales.js. Ensuite, runtime.onInstalled effectue une itération sur ces éléments.

service-worker.js:

const tldLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  ...
}

chrome.runtime.onInstalled.addListener(async () => {
  for (let [tld, locale] of Object.entries(tldLocales)) {
    chrome.contextMenus.create({
      id: tld,
      title: locale,
      type: 'normal',
      contexts: ['selection'],
    });
  }
});