このユーザーインターフェイスオプションは、ブラウザーのコンテキストメニューに１つ以上の項目を追加します。これはユーザーがウェブページを右クリックした時に利用できるコンテキストメニューです。タブも browser.menus API を通じてコンテキストメニューを持つことができます。
このオプションを、特定のブラウザーやウェブページコンテンツに関連する機能をさらすのに使います。例えば、ユーザーが画像をクリックした時にグラフィックエディターを開いたり、ページの一部分が選択されている時にページコンテンツを保存したりする機能を表示できます。メニューにはプレーンなメニュー項目や、チェックボックスや、ラジオボタングループや、 セパレータを追加できます。コンテキストメニュー項目が contextMenus.create を使って追加されたら、すべてのブラウザータブで表示されますが、contextMenus.remove にて削除することで隠すこともできます。
コンテキストメニュー項目を指定する
コンテキストメニューを、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 としてクリップボードにコピーするコンテキストメニュー項目を追加してます。