Элементы контекстного меню

Этот элемент пользовательского интерфейса добавляет один или несколько элементов в контекстное меню браузера. Это контекстное меню доступно, когда пользователь щелкает правой кнопкой мыши на веб-странице. Вкладки также могут иметь контекстные меню, доступные через API browser.menus.

Example of content menu items added by a WebExtension, from the context-menu-demo example

Вы можете использовать этот элемент для отображения функций, относящихся к определённому контексту браузера или веб-страницы. Например, вы можете отобразить функцию открытия графического редактора при щелчке пользователем на изображении или предложить функцию сохранения содержимого страницы, когда часть страницы выбрана. Вы можете добавлять простые элементы меню, элементы с флажком, группы радиокнопок и разделители в меню. После добавления элемента контекстного меню с помощью contextMenus.create, он отображается во всех вкладках браузера, но вы можете скрыть его, удалив с помощью contextMenus.remove.

Полный список поддерживаемых контекстов доступен по адресу menus.ContextType и включает контексты вне веб-страницы, такие как элементы закладок в пользовательском интерфейсе браузера. Например, расширение "Открыть закладку в вкладке контейнера" добавляет элемент меню, который позволяет пользователю открыть URL закладки в новой вкладке контейнера:

A context menu with "open in new container tab" submenu highlighted. The submenu shows personal, work, banking, shopping, and Facebook contextual identities. There is an option at the top of the submenu to select no container.

Определение элементов контекстного меню

Вы управляете элементами контекстного меню программно, используя contextMenus API. Однако, вам необходимо запросить разрешение contextMenus в вашем файле manifest.json, чтобы использовать API.

"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;
    // …
  }
});

Иконки

Подробности о создании иконок для использования с вашим контекстным меню см. в разделе Иконография в документации Системы дизайна Acorn.

Примеры

Репозиторий webextensions-examples на GitHub содержит два примера расширений, которые реализуют элементы контекстного меню:

menu-demo добавляет несколько элементов в контекстное меню браузера.
context-menu-copy-link-with-types добавляет элемент контекстного меню для ссылок, который копирует URL ссылки в буфер обмена, как обычный текст и богатый HTML.

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items