Bouw een contextmenu

Er verschijnt een contextmenu voor de alternatieve klik (vaak de rechtermuisknop genoemd) van een muis. Om een ​​contextmenu te bouwen, voegt u eerst de machtiging "contextMenus" toe aan het bestand manifest.json.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

Optioneel kunt u de toets "icons" gebruiken als u een pictogram naast een menu-item wilt weergeven. In dit voorbeeld gebruikt het menu-item voor de extensie 'Global Google Search' een pictogram van 16 bij 16.

Een contextmenu-item met een pictogram van 16 bij 16.
Een contextmenu-item met een pictogram van 16 bij 16.

De rest van dit voorbeeld is afkomstig uit het voorbeeld van het contextmenu van Global Google Search , dat meerdere contextmenu-opties biedt. Wanneer een extensie meer dan één contextmenu bevat, vouwt Chrome deze automatisch samen in één bovenliggend menu, zoals hier weergegeven:

Een genest contextmenu.
Figuur 4 : Een contextmenu en een genest submenu.

Het voorbeeld laat dit zien door contextMenus.create() aan te roepen in de extension service worker . Submenu-items worden geïmporteerd uit het bestand locales.js . Vervolgens herhaalt runtime.onInstalled deze.

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