Tworzenie menu kontekstowego

Wyświetlane jest menu kontekstowe odpowiadające alternatywnemu kliknięciu myszą (często nazywanej prawym przyciskiem myszy). Aby utworzyć menu kontekstowe, najpierw do pliku manifest.json dodaj uprawnienie "contextMenus".

manifest.json:

  "permissions": [
    "contextMenus"
  ],

Opcjonalnie możesz użyć klawisza "icons", jeśli chcesz wyświetlić ikonę obok pozycji menu. W tym przykładzie element menu rozszerzenia „Globalna wyszukiwarka Google” ma ikonę 16 x 16.

Element menu kontekstowego z ikoną 16 x 16.

Pozostała część tego przykładu pochodzi z przykładowego menu kontekstowego wyszukiwarki Google, w którym znajduje się wiele opcji menu kontekstowego. Jeśli rozszerzenie zawiera więcej niż jedno menu kontekstowe, Chrome automatycznie zwija je w jedno menu nadrzędne, tak jak na przykładzie poniżej:

Rysunek 4. Menu kontekstowe i zagnieżdżone menu podrzędne

Przykład pokazuje to, wywołując contextMenus.create() w skrypcie service worker rozszerzenia. Elementy menu podrzędnego są importowane z pliku locales.js. Następnie runtime.onInstalled nakłada się na nie.

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