Kontextmenüelemente

Diese Benutzeroberflächenoption fügt einem Browser-Kontextmenü ein oder mehrere Elemente hinzu. Dies ist das Menü, das verfügbar ist, wenn ein Benutzer mit der rechten Maustaste auf eine Webseite klickt. Auch Tabs und Lesezeichen können Kontextmenüs haben, verfügbar über die menus API.

Sie verwenden diese Option, um Funktionen bereitzustellen, die für bestimmte Browser- oder Webseitenkontexte relevant sind. Zum Beispiel können Sie Funktionen anzeigen, um einen Grafikeditor zu öffnen, wenn der Benutzer auf ein Bild klickt, oder eine Funktion anbieten, um Seiteninhalte zu speichern, wenn ein Teil einer Seite ausgewählt wird. Sie können einfache Menüpunkte, Kontrollkästchen, Radiogruppen und Trennzeichen zu Menüs hinzufügen. Sobald ein Kontextmenüelement mit Hilfe von menus.create hinzugefügt wurde, wird es in allen Browser-Tabs angezeigt, aber Sie können es durch Entfernen mit menus.remove ausblenden.

Die vollständige Liste der unterstützten Kontexte ist unter menus.ContextType verfügbar und umfasst Kontexte außerhalb einer Webseite, wie z.B. Lesezeichen im Browser-UI. Zum Beispiel fügt die Erweiterung "Open bookmark in Container Tab" ein Menüelement hinzu, das es dem Benutzer ermöglicht, eine Lesezeichen-URL in einem neuen Container-Tab zu öffnen.

Sie können auch die Kontextmenüs, die in Erweiterungsseiten angezeigt werden, wie benutzerdefinierte Seitenleisten und Popups, überschreiben, um entweder Tab- oder Lesezeichen-Kontextmenüs anstelle des Standard-Kontextmenüs zu verwenden, mit menus.overrideContext. Dies ist eine hilfreiche Methode, wenn Ihre Erweiterung eine benutzerdefinierte Darstellung von Tabs oder Lesezeichen bietet. Das Menü umfasst automatisch Menüpunkte für alle anderen Erweiterungen, die Tab- oder Lesezeichen-Kontextmenüelemente definiert haben. Sie können wählen, ob die Standard-Kontextmenüpunkte einbezogen werden sollen. Das Ausblenden der Standardpunkte gibt der Erweiterung die volle Kontrolle über die im gerenderten nativen Kontextmenü angezeigten Elemente, wie im Bild unten für die Tree Style Tab-Erweiterung gezeigt.

"permissions": ["contextMenus"]

browser.contextMenus.create(
  {
    id: "log-selection",
    title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
    contexts: ["selection"],
  },
  onCreated,
);

browser.contextMenus.onClicked.addListener((info, tab) => {
  switch (info.menuItemId) {
    case "log-selection":
      console.log(info.selectionText);
      break;
    // …
  }
});