Crea un menú contextual

Aparecerá un menú contextual para el clic alternativo (con frecuencia llamado clic derecho) de un mouse. Para compilar un menú contextual, primero agrega el permiso "contextMenus" al archivo manifest.json.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

De manera opcional, usa la tecla "icons" si quieres mostrar un ícono junto a un elemento de menú. En este ejemplo, el elemento de menú para la "Búsqueda global de Google" utiliza un ícono de 16 por 16.

Un elemento de menú contextual con un ícono de 16 por 16.
Un elemento de menú contextual con un ícono de 16 por 16.

El resto de este ejemplo se tomó de la muestra del menú contextual de la Búsqueda global de Google, que proporciona varias opciones de menús contextuales. Cuando una extensión contiene más de un menú contextual, Chrome las contrae automáticamente en un solo menú superior, como se muestra a continuación:

Un menú contextual anidado.
Figura 4: Un menú contextual y un submenú anidado.

En el ejemplo, se muestra esto llamando a contextMenus.create() en el service worker de la extensión. Los elementos del submenú se importan desde el archivo locales.js. Luego, runtime.onInstalled itera sobre ellos.

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