このユーザーインターフェイスオプションは、ブラウザーのコンテキストメニューに１つ以上の項目を追加します。これはユーザーがウェブページを右クリックした時に利用できるコンテキストメニューです。タブも browser.menus API を通じてコンテキストメニューを持つことができます。

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

このオプションを、特定のブラウザーやウェブページコンテンツに関連する機能をさらすのに使います。例えば、ユーザーが画像をクリックした時にグラフィックエディターを開いたり、ページの一部分が選択されている時にページコンテンツを保存したりする機能を表示できます。メニューにはプレーンなメニュー項目や、チェックボックスや、ラジオボタングループや、セパレータを追加できます。コンテキストメニュー項目が {{WebExtAPIRef("contextMenus.create")}} を使って追加されたら、すべてのブラウザータブで表示されますが、{{WebExtAPIRef("contextMenus.remove")}} にて削除することで隠すこともできます。

コンテキストメニュー項目を指定する

コンテキストメニューを、{{WebExtAPIRef("contextMenus")}} API を使ってブログラム的に管理できます。しかし、このAPIの恩恵を受けるには、manifest.json にて contextMenus パーミッションを要求する必要があります。

"permissions": ["contextMenus"]

次に、拡張機能のバックグラウンドスクリプト内にコンテキストメニューを追加 (と更新、削除) することもできます。メニュー項目を作成するには id、タイトル、表示するコンテキストメニューを指定します。

browser.contextMenus.create({
  id: "log-selection",
  title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
  contexts: ["selection"]
}, onCreated);

拡張機能はメニュー項目のクリックをリッスンします。項目がクリックされたことや、どのコンテキストメニューでクリックされたかや、クリックが行われたタブの詳細などの情報が渡されて、適切に拡張機能の機能が実行されるのに使われます。

browser.contextMenus.onClicked.addListener(function(info, tab) {
  switch (info.menuItemId) {
    case "log-selection":
      console.log(info.selectionText);
      break;
    ...
  }
})

アイコン

コンテキストメニューで使うアイコンの作り方の詳細は、Photon Design Systemの文書内の Iconography を見てください。

例

GitHub の webextensions-examples リポジトリには、コンテキストメニュー項目を実装した2つの拡張機能の実例があります:

menu-demo ではブラウザーのコンテキストメニューにいくつかの項目を追加しています。
context-menu-copy-link-with-types では、リンクの URL を、プレーンテキストとリッチ HTML としてクリップボードにコピーするコンテキストメニュー項目を追加してます。