選択範囲への機能追加

Chrome拡張機能で「選択範囲への機能追加」とは、ユーザーがWebページ上でテキストを選択した際に、その選択範囲に対して特定の処理を行うメニュー項目を右クリックメニュー（コンテキストメニュー）に追加することを指します。これにより、選択したテキストを別のサービスに送信したり、加工・検索などの操作を手軽に実行できるようになります。

以下に、実装の流れを詳しく説明します。

1. manifest.json の設定

json
{
  "name": "選択範囲拡張メニュー",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["contextMenus", "activeTab", "scripting"],
  "background": {
    "service_worker": "background.js"
  }
}

  • contextMenus: コンテキストメニューの作成に必要なパーミッション。

  • activeTab および scripting: 選択範囲にアクセスして何か処理を行うために必要です。

2. background.js にメニュー追加コード

javascript
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "process-selected-text",
    title: "選択したテキストを処理する",
    contexts: ["selection"] // テキスト選択時にのみ表示
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "process-selected-text") {
    const selectedText = info.selectionText;
    console.log("選択されたテキスト:", selectedText);

    // ここでAPIに送信したり、別タブを開いたりできる
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: (text) => {
        alert("処理対象のテキスト:\n" + text);
      },
      args: [selectedText]
    });
  }
});

3. contexts: ["selection"] とは

  • この設定により、テキストが選択されている状態でのみ、コンテキストメニュー項目が表示されます。

  • 他にも "page"（ページ全体）、"image"（画像）、"link"（リンク）などの選択肢があります。

4. よくある活用例

  • 選択したテキストをGoogleで検索

  • 翻訳APIに送信して翻訳結果を表示

  • 独自のWebサービスにテキストをPOSTして処理

  • 選択範囲をローカルに保存（例：メモ機能）

5. 注意点

  • 選択範囲を取得するのは info.selectionText を使います。

  • 外部APIと通信する場合は、host_permissions で対象ドメインを許可する必要があります。

  • 選択テキストを使ってDOM操作をするには scripting.executeScript を併用します（Manifest V3では eval は使用できません）。

生成日：2025/05/18