menus

Fügen Sie dem Menüsystem des Browsers Einträge hinzu.

Diese API orientiert sich an Chromes "contextMenus"-API, mit der Chrome-Erweiterungen Einträge zum Kontextmenü des Browsers hinzufügen können. Die browser.menus-API erweitert Chromes API um einige Funktionen.

Vor Firefox 55 hieß diese API ebenfalls contextMenus. Dieser Name wurde als Alias beibehalten, sodass Sie mit contextMenus Code schreiben können, der sowohl in Firefox als auch in anderen Browsern funktioniert.

Um diese API zu verwenden, benötigen Sie die Berechtigung menus. Sie können statt menus auch den Alias contextMenus verwenden. In diesem Fall müssen Sie über browser.contextMenus auf die APIs zugreifen.

Mit Ausnahme von menus.getTargetElement() kann diese API nicht in Content-Skripten verwendet werden.

Menüeinträge erstellen

Um einen Menüeintrag zu erstellen, rufen Sie die Methode menus.create() auf. Sie übergeben ihr ein Objekt mit Optionen für den Eintrag, darunter seine ID, sein Typ und die Kontexte, in denen er angezeigt werden soll.

In einer Firefox-Erweiterung mit nicht persistenten Hintergrundseiten (Event Pages) oder in jeder Chrome-Erweiterung rufen Sie menus.create innerhalb eines Listeners für runtime.onInstalled auf. In einer Firefox-Erweiterung mit persistenten Hintergrundseiten erfolgt der Aufruf auf oberster Ebene. Weitere Informationen finden Sie unter menus.create().

Um auf Klicks auf Ihren Menüeintrag zu reagieren, fügen Sie einen Listener für das Ereignis menus.onClicked hinzu. Dieser Listener erhält ein menus.OnClickData-Objekt mit Details zum Ereignis.

Sie können vier verschiedene Arten von Menüeinträgen erstellen, abhängig vom Wert der Eigenschaft type, die Sie in den Optionen an create() übergeben:

"normal": ein Menüeintrag, der lediglich eine Beschriftung anzeigt
"checkbox": ein Menüeintrag, der einen binären Zustand darstellt. Neben der Beschriftung wird ein Häkchen angezeigt. Ein Klick auf den Eintrag schaltet das Häkchen um. Der Klick-Listener erhält zwei zusätzliche Eigenschaften: "checked" gibt an, ob der Eintrag jetzt markiert ist, und "wasChecked", ob er vor dem Klick markiert war.
"radio": ein Menüeintrag, der eine von mehreren Auswahlmöglichkeiten darstellt. Wie bei einer Checkbox wird neben der Beschriftung ein Häkchen angezeigt, und der Klick-Listener erhält "checked" und "wasChecked". Wenn Sie jedoch mehrere Radio-Einträge erstellen, bilden diese eine Gruppe: Nur ein Eintrag der Gruppe kann markiert sein, und durch Klicken auf einen Eintrag wird dieser markiert.
"separator": eine Linie, die Gruppen von Einträgen trennt.

Wenn Sie mehr als einen Kontextmenüeintrag oder mehr als einen Eintrag im Menü „Extras“ erstellt haben, werden die Einträge in einem Untermenü angeordnet. Das übergeordnete Menü trägt den Namen der Erweiterung. Hier sehen Sie beispielsweise eine Erweiterung namens „Menu demo“, die zwei Kontextmenüeinträge hinzugefügt hat:

Kontextmenü mit einem Untermenü namens „Menu demo“, das zwei Einträge mit den Beschriftungen „Click me!“ und „Click me, too!“ enthält

Icons

Wenn Sie für Ihre Erweiterung über den Manifest-Schlüssel "icons" Icons festgelegt haben, wird das angegebene Icon neben der Beschriftung Ihres Menüeintrags angezeigt. Der Browser versucht, für eine normale Anzeige ein 16 × 16 Pixel großes Icon und für eine Anzeige mit hoher Pixeldichte ein 32 × 32 Pixel großes Icon auszuwählen:

Kontextmenü mit einem durch das Icon der Erweiterung gekennzeichneten Untermenü namens „Menu demo“, das zwei Einträge mit den Beschriftungen „Click me!“ und „Click me, too!“ enthält

Nur für Einträge in einem Untermenü können Sie eigene Icons festlegen, indem Sie die Option icons an menus.create() übergeben:

Kontextmenü mit zwei Einträgen mit den Beschriftungen „Click me!“ und „Click me, too!“. Der Eintrag „Click me!“ hat ein grünes Farbeimer-Icon, der Eintrag „Click me, too!“ ein blaues.

Beispiel

Hier sehen Sie ein Kontextmenü mit vier Einträgen: einem normalen Eintrag, zwei Radio-Einträgen mit Trennlinien auf beiden Seiten und einer Checkbox. Die Radio-Einträge haben eigene Icons.

Kontextmenü mit vier Einträgen mit den Beschriftungen „Remove me!“, „Greenify“, „Bluify“ und „Uncheck me“. „Greenify“ und „Bluify“ sind Radio-Einträge mit eigenen Icons.

Ein solches Untermenü können Sie mit folgendem Code erstellen:

browser.menus.create(
  {
    id: "remove-me",
    title: browser.i18n.getMessage("menuItemRemoveMe"),
    contexts: ["all"],
  },
  onCreated,
);

browser.menus.create(
  {
    id: "separator-1",
    type: "separator",
    contexts: ["all"],
  },
  onCreated,
);

browser.menus.create(
  {
    id: "greenify",
    type: "radio",
    title: browser.i18n.getMessage("menuItemGreenify"),
    contexts: ["all"],
    checked: true,
    icons: {
      16: "icons/paint-green-16.png",
      32: "icons/paint-green-32.png",
    },
  },
  onCreated,
);

browser.menus.create(
  {
    id: "bluify",
    type: "radio",
    title: browser.i18n.getMessage("menuItemBluify"),
    contexts: ["all"],
    checked: false,
    icons: {
      16: "icons/paint-blue-16.png",
      32: "icons/paint-blue-32.png",
    },
  },
  onCreated,
);

browser.menus.create(
  {
    id: "separator-2",
    type: "separator",
    contexts: ["all"],
  },
  onCreated,
);

let checkedState = true;

browser.menus.create(
  {
    id: "check-uncheck",
    type: "checkbox",
    title: browser.i18n.getMessage("menuItemUncheckMe"),
    contexts: ["all"],
    checked: checkedState,
  },
  onCreated,
);

Typen

menus.ContextType: Die verschiedenen Kontexte, in denen ein Menü erscheinen kann.
menus.ItemType: Der Typ eines Menüeintrags: "normal", "checkbox", "radio", "separator".
menus.OnClickData: Informationen, die beim Klicken auf einen Menüeintrag übermittelt werden.

Eigenschaften

menus.ACTION_MENU_TOP_LEVEL_LIMIT: Die maximale Anzahl von Erweiterungseinträgen auf oberster Ebene, die einem Menü mit dem ContextType "browser_action" oder "page_action" hinzugefügt werden können.

Funktionen

menus.create(): Erstellt einen neuen Menüeintrag.
menus.getTargetElement(): Gibt das Element für eine bestimmte info.targetElementId zurück.
menus.overrideContext(): Blendet alle standardmäßigen Firefox-Menüeinträge aus, damit eine eigene Kontextmenüoberfläche bereitgestellt werden kann.
menus.refresh(): Aktualisiert ein Menü, das gerade angezeigt wird.
menus.remove(): Entfernt einen Menüeintrag.
menus.removeAll(): Entfernt alle von dieser Erweiterung hinzugefügten Menüeinträge.
menus.update(): Aktualisiert einen zuvor erstellten Menüeintrag.

Ereignisse

menus.onClicked: Wird ausgelöst, wenn auf einen Menüeintrag geklickt wird.
menus.onHidden: Wird ausgelöst, wenn der Browser ein Menü ausblendet.
menus.onShown: Wird ausgelöst, wenn der Browser ein Menü anzeigt.

Beispielerweiterungen

Browser-Kompatibilität

Hinweis: Diese API basiert auf Chromiums chrome.contextMenus-API. Diese Dokumentation wurde von context_menus.json im Chromium-Code abgeleitet.

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden