Kontextmenüeinträge
Mit dieser Benutzeroberflächenoption fügen Sie einem Browser-Kontextmenü einen oder mehrere Einträge hinzu. Dieses Menü erscheint, 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 stellen Sie Funktionen bereit, die für bestimmte Kontexte im Browser oder auf einer Webseite relevant sind. Beispielsweise können Sie eine Funktion zum Öffnen eines Grafikeditors anzeigen, wenn der Benutzer auf ein Bild klickt, oder eine Funktion zum Speichern von Seiteninhalten anbieten, wenn ein Teil der Seite ausgewählt ist. Sie können einfache Menüeinträge, Kontrollkästchen, Optionsfeldgruppen und Trennlinien zu Menüs hinzufügen. Sobald ein Kontextmenüeintrag 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 finden Sie unter menus.ContextType. Sie umfasst auch Kontexte außerhalb einer Webseite, etwa Lesezeicheneinträge in der Browseroberfläche. Die Erweiterung „Open bookmark in Container Tab“ fügt beispielsweise einen Menüeintrag hinzu, mit dem Benutzer die URL eines Lesezeichens in einem neuen Container-Tab öffnen können.
Sie können auch die Kontextmenüs überschreiben, die auf Erweiterungsseiten wie benutzerdefinierten Seitenleisten und Pop-ups angezeigt werden. Mit menus.overrideContext können Sie dort statt des Standard-Kontextmenüs das Tab- oder Lesezeichen-Kontextmenü verwenden. Das ist hilfreich, wenn Ihre Erweiterung Tabs oder Lesezeichen auf eigene Weise darstellt. Das Menü enthält automatisch auch Menüeinträge anderer Erweiterungen, die Tab- oder Lesezeichen-Kontextmenüeinträge definiert haben. Sie können festlegen, ob die Standard-Kontextmenüeinträge enthalten sein sollen. Wenn Sie die Standardeinträge ausblenden, hat Ihre Erweiterung die vollständige Kontrolle über die Einträge im angezeigten nativen Kontextmenü, wie das folgende Bild für die Erweiterung Tree Style Tab zeigt.
Kontextmenüeinträge festlegen
Sie verwalten Kontextmenüeinträge programmatisch mit der contextMenus API. Um die API nutzen zu können, müssen Sie jedoch in Ihrer manifest.json die Berechtigung contextMenus anfordern.
"permissions": ["contextMenus"]
Anschließend können Sie Kontextmenüeinträge im Hintergrundskript Ihrer Erweiterung hinzufügen, aktualisieren oder löschen. Zum Erstellen eines Menüeintrags geben Sie eine ID, einen Titel und die Kontextmenüs an, in denen er erscheinen soll:
browser.contextMenus.create(
{
id: "log-selection",
title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
contexts: ["selection"],
},
onCreated,
);
Ihre Erweiterung reagiert dann auf Klicks auf die Menüeinträge. Anhand der übergebenen Informationen zum angeklickten Eintrag, zum Kontext des Klicks und zum Tab, in dem der Klick stattfand, können Sie die entsprechende Funktion der Erweiterung aufrufen.
browser.contextMenus.onClicked.addListener((info, tab) => {
switch (info.menuItemId) {
case "log-selection":
console.log(info.selectionText);
break;
// …
}
});
Icons
Wie Sie Icons für Ihr Kontextmenü erstellen, erfahren Sie unter Ikonografie in der Dokumentation des Acorn Design System.
Beispiele
Das Repository webextensions-examples auf GitHub enthält zwei Beispiele für Erweiterungen, die Kontextmenüeinträge implementieren:
- menu-demo fügt dem Kontextmenü des Browsers mehrere Einträge hinzu.
- context-menu-copy-link-with-types fügt für Links einen Kontextmenüeintrag hinzu, der die Link-URL als einfachen Text und als Rich HTML in die Zwischenablage kopiert.