Kontextmenüelemente

Diese Benutzeroberflächenoption fügt ein oder mehrere Elemente zu einem Browser-Kontextmenü 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, die über die menus API verfügbar sind.

Mit dieser Option können Sie Funktionen zu spezifischen Browser- oder Webseiten-Kontexten hinzufügen. Zum Beispiel können Sie Funktionen anzeigen, um einen Grafikeditor zu öffnen, wenn der Benutzer auf ein Bild klickt, oder eine Funktion anbieten, um Seiteninhalt zu speichern, wenn ein Teil einer Seite ausgewählt ist. Sie können einfache Menüpunkte, Kontrollkästchen, Optionsgruppenschaltflächen und Trennlinien zu Menüs hinzufügen. Sobald ein Kontextmenüpunkt mit menus.create hinzugefügt wurde, wird er in allen Browser-Tabs angezeigt. Sie können ihn jedoch ausblenden, indem Sie ihn mit menus.remove entfernen.

Die vollständige Liste der unterstützten Kontexte ist unter menus.ContextType verfügbar und umfasst auch Kontexte außerhalb einer Webseite, wie Lesezeichenelemente in der Browser-Benutzeroberfläche. Zum Beispiel fügt die Erweiterung "Open bookmark in Container Tab" ein Menüelement hinzu, das 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, übersteuern, um entweder die 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 Präsentation von Tabs oder Lesezeichen bereitstellt. Das Menü enthält automatisch Menüelemente von anderen Erweiterungen, die Tab- oder Lesezeichen-Kontextmenüs definiert haben. Sie können wählen, ob die Standard-Kontextmenüelemente eingeschlossen werden sollen. Durch Ausblenden der Standardelemente erhält die Erweiterung vollständige Kontrolle über die im 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;
    // …
  }
});