Kontextmenü erstellen

Es wird ein Kontextmenü für den alternativen Klick (häufig als Rechtsklick bezeichnet) einer Maus angezeigt. Auf dieser Seite wird beschrieben, wie Sie ein Kontextmenü implementieren. Eine vollständige Liste der zugehörigen API-Mitglieder finden Sie unter browser.contextMenu.

Um ein Kontextmenü zu erstellen, fügen Sie zuerst die "contextMenus"-Berechtigung zur Datei „manifest.json“ hinzu.

manifest.json:

  "permissions": [
    "contextMenus"
  ],

Optional können Sie den Schlüssel "icons" verwenden, um neben einem Menüpunkt ein Symbol anzeigen zu lassen. In diesem Beispiel wird für den Menüpunkt der Erweiterung „Global Google Search“ ein 16 × 16-Symbol verwendet.

Ein Kontextmenüelement mit einem 16 × 16-Symbol.
Ein Kontextmenüelement mit einem 16 × 16-Symbol.

Der Rest dieses Beispiels stammt aus dem Beispiel für das globale Google Suche-Kontextmenü, das mehrere Kontextmenüoptionen bietet. Wenn eine Erweiterung mehrere Kontextmenüs enthält, werden sie in Chrome automatisch in einem einzelnen übergeordneten Menü zusammengefasst, wie hier zu sehen ist:

Ein verschachteltes Kontextmenü.
Abbildung 4: Ein Kontextmenü und ein verschachteltes Untermenü.

Im Beispiel wird dies durch den Aufruf von contextMenus.create() im Extension Service Worker gezeigt. Untermenüelemente werden aus der Datei locales.js importiert. Anschließend wird runtime.onInstalled durchlaufen.

service-worker.js:

const tldLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  ...
}

browser.runtime.onInstalled.addListener(async () => {
  for (let [tld, locale] of Object.entries(tldLocales)) {
    browser.contextMenus.create({
      id: tld,
      title: locale,
      type: 'normal',
      contexts: ['selection'],
    });
  }
});