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, commencez par ajouter 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 de l'extension "recherche Google globale" utilise une icône de 16 x 16.

Élément de menu contextuel avec une icône de 16 x 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 :

Menu contextuel imbriqué.
Figure 4 : Menu contextuel et sous-menu imbriqué.

L'exemple montre cela en appelant contextMenus.create() dans le service worker de l'extension. Les éléments du sous-menu sont importés à partir du fichier locales.js. runtime.onInstalled itère ensuite 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'],
    });
  }
});