Chrome拡張機能！コンテキストメニューでクリックされた要素を取得する方法

Chrome（クローム）拡張機能で、コンテキストメニューでクリックされた要素を取得する方法を紹介します。

ちなみに、コンテキストメニューを追加する基本的な方法は、以下のリンクを参照ください。

【関連記事】
▶これで解決！Chrome拡張機能 にコンテストメニューを表示する

スポンサーリンク

BackgroundScirpt + ContentScriptで実現

Background Scirptからは、右クリックを行った時の要素を取得できないため、ContentScriptを併用して、クリックされた要素を取得します。

処理のシーケンス的には、次のようなイメージになります。

manifest.json

今回作成するサンプルアプリのmanifest.jsonは、次のような感じになります。

  ・・・
  "permissions": [ "activeTab", "contextMenus" ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["*://developer.chrome.com/*"],
      "js": ["contentScript.js"]
    }
  ],
  ・・・

Content Scriptの実装

contentScript.jsという名前でファイルを作成し、次のコードを入力します。

/**
 * ページ上でコンテストメニューを表示した時に発生するイベント
 */
document.addEventListener("contextmenu", function(event){
    // イベント発生時の要素を保存
    clickedEl = event.target;
}, true);

/**
 * Background Scriptからのメッセージを受け取るためのリスナー
 */
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    // 保存しておいた要素情報をレスポンスに設定して返却
    if(request == "getClickedEl") {
        sendResponse({value: clickedEl.outerHTML});
    }
});

スポンサーリンク

Background Scriptの実装

次にbackground.jsという名前でファイルを作成し、Background Scriptを完成させましょう。

/**
 * 拡張機能インストール時の処理
 */
chrome.runtime.onInstalled.addListener(function() {
  // コンテキストメニューの追加
  const parent = chrome.contextMenus.create({
    type: "normal",
    id: "sample_manu",
    title: "サンプルメニュー",
    contexts: ["all"]
  });
});


/**
  * メニューが選択されたときの処理
  * 選択されたアイテムはこちらの関数の引数に入ってくる(今回は item)
  */
 chrome.contextMenus.onClicked.addListener(function(item){
 
  // Background Scirptからはコンテストメニュー表示元の要素を直接取得できないため、
  // Message通知機能を使って、Content Scirpt側にメッセージを送信する
  chrome.tabs.sendMessage(tab.id, "getClickedEl", function(response) {
    // Content Scirpt側で設定されたレスポンス（クリックされた要素）が
    // コールバック関数の引数でやってくる
    console.log(response.value);
  });
});

以上、完成です。

実際に動かしてみて、コンテキストメニューをクリックした時に、コンソールにクリックした要素のHTMLが出力されているか確認してみましょう。