右クリックメニューのカスタマイズ

Chrome拡張機能における「右クリックメニューのカスタマイズ（コンテキストメニューの追加）」は、chrome.contextMenus API を使って実装します。この機能を使うことで、ユーザーがWebページ上で右クリックした際に、特定の項目をコンテキストメニュー（右クリックメニュー）に追加し、拡張機能と連携した操作を行えるようにできます。

---

1. 基本構成

a. manifest.json の設定

拡張機能でコンテキストメニューを利用するには、"permissions" に "contextMenus" を追加します。

json
{
  "name": "Context Menu Sample",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["contextMenus"],
  "background": {
    "service_worker": "background.js"
  }
}

---

2. コンテキストメニューの追加方法

a. background.js でメニューを作成

javascript
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "sample_menu",             // 一意のID
    title: "このページのURLを取得", // メニューに表示されるテキスト
    contexts: ["page"]             // メニューが表示されるコンテキスト（例: "page", "selection", "link", "image"など）
  });
});

---

3. メニュークリック時のイベント処理

作成したコンテキストメニューがクリックされた際の処理を chrome.contextMenus.onClicked で定義します。

javascript
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "sample_menu") {
    console.log("ページのURL:", tab.url);
    // 必要に応じて処理を追加（例: 通知表示、クリップボードにコピーなど）
  }
});

---

4. 表示コンテキストの種類

contexts には以下のような値が指定できます。

---

5. サブメニューの作成（複数メニュー）

javascript
chrome.contextMenus.create({
  id: "parent",
  title: "親メニュー",
  contexts: ["selection"]
});

chrome.contextMenus.create({
  id: "child1",
  parentId: "parent",
  title: "選択したテキストをコピー",
  contexts: ["selection"]
});

chrome.contextMenus.create({
  id: "child2",
  parentId: "parent",
  title: "Googleで検索",
  contexts: ["selection"]
});

---

6. 注意点

• chrome.contextMenus.create() は拡張機能のインストールまたは更新時（onInstalled）に行うのが一般的です。

• Manifest V3 では background.js は Service Worker になっており、永続的ではないため、状態を保持する場合は storage API との併用が必要です。

• コンテキストメニューはユーザー操作の補助であり、最小権限の原則を意識して設計してください。

---

まとめ

Chrome拡張機能における「右クリックメニューのカスタマイズ」は、ユーザーの操作性を向上させるための重要な手段です。chrome.contextMenus API を使えば、様々なコンテキストに応じたメニューの追加・処理が可能です。適切な context とイベントハンドラを組み合わせて、拡張機能に必要な機能を自然な形で統合できます。