menus.create()

Erstellt ein Menüelement mit einem Optionsobjekt, das Eigenschaften für das Element definiert.

Im Gegensatz zu anderen asynchronen Funktionen gibt diese keine Promise zurück, sondern verwendet einen optionalen Rückruf, um Erfolg oder Misserfolg zu kommunizieren. Der Rückgabewert ist die ID des neuen Elements.

Für die Kompatibilität mit anderen Browsern stellt Firefox diese Methode im contextMenus-Namespace und im menus-Namespace zur Verfügung. Es ist jedoch nicht möglich, Menüelemente für das Tool-Menü (contexts: ["tools_menu"]) mit dem contextMenus-Namespace zu erstellen.

Erstellen von Menüs in persistenten und nicht-persistenten Erweiterungen

Wie Sie Menüelemente erstellen, hängt davon ab, ob Ihre Erweiterung verwendet:

  • Nicht-persistente Hintergrundseiten (eine Ereignisseite), wo Menüs über Browser- und Erweiterungsneustarts hinweg bestehen bleiben. Sie rufen menus.create (mit einer menüspezifischen ID) innerhalb eines runtime.onInstalled-Listeners auf. Dies verhindert wiederholte Versuche, das Menüelement zu erstellen, wenn die Seiten neu starten, was bei einem Aufruf auf oberster Ebene geschehen würde.
  • Persistente Hintergrundseiten:
    • in Chrome werden Menüelemente von persistenten Hintergrundseiten gespeichert. Erstellen Sie Ihre Menüs in einem runtime.onInstalled-Listener.
    • in Firefox werden Menüelemente von persistenten Hintergrundseiten nie gespeichert. Rufen Sie menus.create bedingungslos von der obersten Ebene auf, um die Menüpunkte zu registrieren.

Weitere Informationen finden Sie unter Erweiterung initialisieren auf der Seite zu Hintergrundskripten und Ereignisgesteuerte Hintergrundskripte im Extension Workshop.

Syntax

js
browser.menus.create(
  createProperties, // object
  () => {/* … */}   // optional function
)

Parameter

createProperties

object. Eigenschaften für das neue Menüelement.

checked Optional

boolean. Der anfängliche Zustand eines Kontrollkästchens oder Radio-Elements: true für ausgewählt und false für nicht ausgewählt. Nur ein Radio-Element kann gleichzeitig in einer bestimmten Gruppe von Radio-Elementen ausgewählt sein.

command Optional

string. String, der eine Aktion beschreibt, die ausgeführt werden soll, wenn der Benutzer auf das Element klickt. Die anerkannten Werte sind:

  • "_execute_browser_action": Simuliert einen Klick auf die Browseraktion der Erweiterung und öffnet deren Popup, wenn es eines gibt (nur Manifest V2)
  • "_execute_action": Simuliert einen Klick auf die Aktion der Erweiterung und öffnet deren Popup, wenn es eines gibt (nur Manifest V3)
  • "_execute_page_action": Simuliert einen Klick auf die Seitenaktion der Erweiterung und öffnet deren Popup, wenn es eines gibt
  • "_execute_sidebar_action": Öffnet die Seitenleiste der Erweiterung

Siehe die Dokumentation zu speziellen Shortcuts im manifest.json Schlüssel commands für Details.

Wenn einer der anerkannten Werte angegeben ist, löst ein Klick auf das Element nicht das menus.onClicked-Ereignis aus; stattdessen wird die Standardaktion ausgelöst, wie das Öffnen eines Popups. Andernfalls löst ein Klick auf das Element menus.onClicked aus und das Ereignis kann verwendet werden, um ein alternatives Verhalten zu implementieren.

contexts Optional

array von menus.ContextType. Array von Kontexten, in denen dieses Menüelement angezeigt wird. Wenn diese Option nicht angegeben ist:

  • Wenn das übergeordnete Element Kontexte gesetzt hat, übernimmt dieses Element die Kontexte des übergeordneten Elements
  • Andernfalls erhält das Element ein Kontextarray von ["page"].
documentUrlPatterns Optional

array von string. Ermöglicht es Ihnen, dass das Element nur für Dokumente angewendet wird, deren URL einem der angegebenen Match-Muster entspricht. Dies gilt auch für Rahmen.

enabled Optional

boolean. Ob dieses Menüelement aktiviert oder deaktiviert ist. Der Standardwert ist true.

icons Optional

object. Eines oder mehrere benutzerdefinierte Symbole, die neben dem Element angezeigt werden sollen. Benutzerdefinierte Symbole können nur für Elemente festgelegt werden, die in Untermenüs angezeigt werden. Diese Eigenschaft ist ein Objekt mit einer Eigenschaft für jedes bereitgestellte Symbol: Der Name der Eigenschaft sollte die Größe des Symbols in Pixeln enthalten, und der Pfad ist relativ zum Symbol aus dem Stammverzeichnis der Erweiterung. Der Browser versucht, ein 16x16 Pixel-Symbol für ein normales Display oder ein 32x32 Pixel-Symbol für ein hochauflösendes Display zu wählen. Um ein Skalieren zu vermeiden, können Sie Symbole so angeben:

js
browser.menus.create({
  icons: {
    16: "path/to/geo-16.png",
    32: "path/to/geo-32.png",
  },
});

Alternativ können Sie ein einzelnes SVG-Symbol angeben, das entsprechend skaliert wird:

js
browser.menus.create({
  icons: {
    16: "path/to/geo.svg",
  },
});

Hinweis: Das oberste Menüelement verwendet die icons, die im Manifest angegeben sind, anstatt der mit diesem Schlüssel angegebenen.

id Optional

string. Die eindeutige ID, die diesem Element zugeordnet wird. Dies ist obligatorisch für nicht-persistente Hintergrund- (Ereignis-) Seiten in Manifest V2 und in Manifest V3. Darf nicht mit einer anderen ID dieser Erweiterung identisch sein.

onclick Optional

function. Die Funktion, die aufgerufen wird, wenn auf das Menüelement geklickt wird. Ereignisseiten können dies nicht verwenden; stattdessen sollten sie einen Listener für menus.onClicked registrieren.

parentId Optional

integer oder string. Die ID eines übergeordneten Menüelements; dies macht das Element zu einem Kind eines zuvor hinzugefügten Elements. Hinweis: Wenn Sie mehr als ein Menüelement erstellt haben, werden die Elemente in einem Untermenü platziert. Der Elternteil des Untermenüs wird mit dem Namen der Erweiterung beschriftet.

targetUrlPatterns Optional

array von string. Ähnlich wie documentUrlPatterns, ermöglicht es Ihnen jedoch, basierend auf dem href von Anker-Tags und dem src-Attribut von img/audio/video-Tags zu filtern. Dieser Parameter unterstützt jedes URL-Schema, selbst solche, die normalerweise nicht in einem Match-Muster erlaubt sind.

title Optional

string. Der Text, der im Element angezeigt werden soll. Obligatorisch, es sei denn, type ist "separator".

Sie können %s im String verwenden. Wenn Sie dies in einem Menüelement tun und ein Text auf der Seite ausgewählt ist, wenn das Menü angezeigt wird, dann wird der ausgewählte Text in den Titel interpoliert. Zum Beispiel, wenn title "Übersetze '%s' ins Pig Latin" lautet und der Benutzer das Wort "cool" auswählt und dann das Menü aktiviert, dann lautet der Titel des Menüelements: "Übersetze 'cool' ins Pig Latin".

Wenn der Titel ein kaufmännisches Und-Zeichen "&" enthält, wird der nächste Buchstabe als Zugriffstaste für das Element verwendet, und das kaufmännische Und-Zeichen wird nicht angezeigt. Ausnahmen hiervon sind:

  • Wenn das nächste Zeichen ebenfalls ein kaufmännisches Und-Zeichen ist: dann wird ein einzelnes kaufmännisches Und-Zeichen angezeigt und keine Zugriffstaste gesetzt. Effektiv wird "&&" verwendet, um ein einzelnes kaufmännisches Und-Zeichen anzuzeigen.
  • Wenn das nächste Zeichen die Interpolationsdirektive "%s" ist: dann wird das kaufmännische Und-Zeichen nicht angezeigt und keine Zugriffstaste gesetzt.
  • Wenn das kaufmännische Und-Zeichen das letzte Zeichen im Titel ist: dann wird das kaufmännische Und-Zeichen nicht angezeigt und keine Zugriffstaste gesetzt.

Nur das erste kaufmännische Und-Zeichen wird verwendet, um eine Zugriffstaste festzulegen: Nachfolgende kaufmännische Und-Zeichen werden nicht angezeigt, setzen jedoch keine Tasten. So wird "&A and &B" als "A and B" angezeigt und setzt "A" als Zugriffstaste.

In einigen lokalisierten Versionen von Firefox (Japanisch und Chinesisch) wird die Zugriffstaste in Klammern gesetzt und an das Menülable angehängt, es sei denn, der Menütitel endet bereits mit der Zugriffstaste ("toolkit(&K)" zum Beispiel). Für mehr Details siehe Firefox Bug 1647373.

type Optional

menus.ItemType. Der Typ des Menüelements: "normal", "checkbox", "radio", "separator". Der Standardwert ist "normal".

viewTypes Optional

extension.ViewType. Liste der Ansichtsarten, in denen das Menüelement angezeigt wird. Standardmäßig werden alle Ansichten angezeigt, einschließlich derer ohne viewType.

visible Optional

boolean. Ob das Element im Menü angezeigt wird. Der Standardwert ist true.

callback Optional

function. Wird aufgerufen, wenn das Element erstellt wurde. Wenn es Probleme beim Erstellen des Elements gab, sind Details in runtime.lastError verfügbar.

Rückgabewert

integer oder string. Die ID des neu erstellten Elements.

Beispiele

Dieses Beispiel erstellt ein Kontextmenüelement, das angezeigt wird, wenn der Benutzer auf der Seite Text ausgewählt hat. Es protokolliert einfach den ausgewählten Text in der Konsole:

js
browser.menus.create({
  id: "log-selection",
  title: "Log '%s' to the console",
  contexts: ["selection"],
});

browser.menus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "log-selection") {
    console.log(info.selectionText);
  }
});

Dieses Beispiel fügt zwei Radio-Elemente hinzu, mit denen Sie auswählen können, ob ein grüner oder blauer Rahmen auf die Seite angewendet werden soll. Beachten Sie, dass dieses Beispiel die activeTab-Berechtigung benötigt.

js
function onCreated() {
  if (browser.runtime.lastError) {
    console.log("error creating item:", browser.runtime.lastError);
  } else {
    console.log("item created successfully");
  }
}

browser.menus.create(
  {
    id: "radio-green",
    type: "radio",
    title: "Make it green",
    contexts: ["all"],
    checked: false,
  },
  onCreated,
);

browser.menus.create(
  {
    id: "radio-blue",
    type: "radio",
    title: "Make it blue",
    contexts: ["all"],
    checked: false,
  },
  onCreated,
);

let makeItBlue = 'document.body.style.border = "5px solid blue"';
let makeItGreen = 'document.body.style.border = "5px solid green"';

browser.menus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "radio-blue") {
    browser.tabs.executeScript(tab.id, {
      code: makeItBlue,
    });
  } else if (info.menuItemId === "radio-green") {
    browser.tabs.executeScript(tab.id, {
      code: makeItGreen,
    });
  }
});

Beispielerweiterungen

Browser-Kompatibilität

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