menus

Erstellen von Menüelementen

Um ein Menüelement zu erstellen, rufen Sie die Methode menus.create() auf. Sie übergeben dieser Methode ein Objekt, das Optionen für das Element enthält, einschließlich der Element-ID, des Elementtyps und der Kontexte, in denen es angezeigt werden soll.

In einer Firefox-Erweiterung, die nicht-persistente Hintergrundseiten (Ereignisseiten) verwendet oder in einer beliebigen Chrome-Erweiterung rufen Sie menus.create innerhalb eines runtime.onInstalled Listeners auf. In einer Firefox-Erweiterung, die persistente Hintergrundseiten verwendet, machen Sie einen Aufruf auf höchster Ebene. Siehe menus.create() für weitere Informationen.

Hören Sie auf Klicks auf Ihr Menüelement, indem Sie einen Listener zum menus.onClicked Ereignis hinzufügen. Dieser Listener wird mit einem menus.OnClickData Objekt aufgerufen, das die Details des Ereignisses enthält.

Sie können vier verschiedene Arten von Menüpunkten erstellen, basierend auf dem Wert der type Eigenschaft, die Sie in den Optionen an create() übergeben:

• "normal": ein Menüpunkt, der einfach nur ein Label anzeigt
• "checkbox": ein Menüpunkt, der einen binären Zustand darstellt. Es zeigt ein Häkchen neben dem Label an. Ein Klick auf das Element schaltet das Häkchen um. Der Klick-Listener erhält zwei zusätzliche Eigenschaften: "checked", die anzeigt, ob das Element jetzt angehakt ist, und "wasChecked", die anzeigt, ob das Element vor dem Klickereignis angehakt war.
• "radio": ein Menüpunkt, der eine Auswahl aus einer Gruppe von Möglichkeiten darstellt. Genau wie ein Kontrollkästchen zeigt es ein Häkchen neben dem Label an und sein Klick-Listener erhält "checked" und "wasChecked". Wenn Sie jedoch mehr als ein Radio-Element erstellen, funktionieren die Elemente als Gruppe von Radio-Elementen: Nur ein Element in der Gruppe kann angehakt sein und ein Klick auf ein Element macht es zum angehakten Element.
• "separator": eine Linie, die eine Gruppe von Elementen trennt.

Wenn Sie mehr als ein Kontextmenüelement oder mehr als ein Werkzeugmenüelement erstellt haben, werden die Elemente in einem Untermenü platziert. Das Untermenü wird mit dem Namen der Erweiterung gekennzeichnet. Zum Beispiel finden Sie hier eine Erweiterung namens "Menu demo", die zwei Kontextmenüelemente hinzugefügt hat:

Icons

Wenn Sie für Ihre Erweiterung Icons mit dem "icons" Manifest-Key angegeben haben, wird Ihr Menüelement das angegebene Icon neben seinem Label anzeigen. Der Browser versucht, ein 16x16 Pixel großes Icon für eine normale Anzeige oder ein 32x32 Pixel großes Icon für eine hochauflösende Anzeige auszuwählen:

Nur für Elemente in einem Untermenü können Sie benutzerdefinierte Icons angeben, indem Sie die Option icons an menus.create() übergeben:

Beispiel

Hier ist ein Kontextmenü mit 4 Elementen: ein normales Element, zwei Radio-Elemente mit Trennzeichen auf jeder Seite und ein Kontrollkästchen. Die Radio-Elemente haben benutzerdefinierte Icons.

Sie könnten ein solches Untermenü 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ü angezeigt werden kann.

menus.ItemType

Der Typ des Menüpunkts: "normal", "checkbox", "radio", "separator".

menus.OnClickData

Informationen, die gesendet werden, wenn ein Menüpunkt angeklickt wird.

Eigenschaften

menus.ACTION_MENU_TOP_LEVEL_LIMIT

Die maximale Anzahl von obersten Erweiterungselementen, die zu einem Menüpunkt hinzugefügt werden können, dessen ContextType "browser_action" oder "page_action" ist.

Funktionen

menus.create()

Erstellt ein neues Menüelement.

menus.getTargetElement()

Gibt das Element für eine gegebene info.targetElementId zurück.

menus.overrideContext()

Verbirgt alle standardmäßigen Firefox-Menüpunkte zugunsten eines benutzerdefinierten Kontextmenü-UI.

menus.refresh()

Aktualisiert ein Menü, das derzeit angezeigt wird.

menus.remove()

Entfernt ein Menüelement.

menus.removeAll()

Entfernt alle von dieser Erweiterung hinzugefügten Menüpunkte.

menus.update()

Aktualisiert ein zuvor erstelltes Menüelement.

Ereignisse

menus.onClicked

Wird ausgelöst, wenn ein Menüpunkt angeklickt wird.

menus.onHidden

Wird ausgelöst, wenn der Browser ein Menü verbirgt.

menus.onShown

Wird ausgelöst, wenn der Browser ein Menü anzeigt.

Beispielerweiterungen

• menu-accesskey-visible
• menu-demo
• menu-labelled-open
• menu-remove-element
• menu-search
• session-state

Browser-Kompatibilität