Creare un menu contestuale

Viene visualizzato un menu contestuale per il clic alternativo (spesso chiamato clic con il tasto destro) di un mouse. Per creare un menu contestuale, aggiungi innanzitutto l'autorizzazione "contextMenus" permission al file manifest.json.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

Se vuoi mostrare un'icona accanto a una voce di menu, utilizza la "icons" chiave (facoltativa). In questo esempio, la voce di menu per l'estensione "Ricerca Google globale" utilizza un'icona 16 x 16.

Una voce del menu contestuale con un'icona 16 x 16.
Una voce di menu contestuale con un'icona 16 x 16.

Il resto di questo esempio è tratto dall'esempio di menu contestuale di Ricerca Google globale, che fornisce più opzioni di menu contestuale. Quando un'estensione contiene più di un menu contestuale, Chrome li comprime automaticamente in un unico menu principale, come mostrato di seguito:

Un menu contestuale nidificato.
Figura 4: un menu contestuale e un sottomenu nidificato.

L'esempio mostra questo chiamando contextMenus.create() nel service worker dell'estensione. Le voci del sottomenu vengono importate dal file locales.js. Poi runtime.onInstalled le scorre.

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'],
    });
  }
});