chrome extensionを、ページ内のリンクをクリックしたときに動作させたい

Question

前提・実現したいこと

現状は、リンクを右クリック→自作のcontext menuを左クリック→content scriptからURLを受け取って処理　の流れで実装しているのですが、これをリンク左クリックするだけで実行したいです。

該当のソースコード

// background.js

// ここに処理を書く の内容をリンクのクリック時に実行したい

chrome.contextMenus.onClicked.addListener(function (item) {
	chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
		chrome.tabs.sendMessage(tabs[0].id, "getClickedEl", function (response) {

		// content scriptから右クリックしたリンクのURLを受け取る
		// ここに処理を書く

		});
	});
});

Answer 1

document内のすべてのaタグにイベントリスナーを設定してはどうでしょうか。

const yourHandler = (e) => {
  // クリックに対する処理
};

const links = document.querySelectorAll('a');
const linksList = Array.from(links);
linkList.forEach(link => {
  link.addEventListener('click', yourHandler);
});

コードはテストしていないのでミスがあったらごめんなさい。

イベントオブジェクト e については Event - Web API | MDN を参照してください。

Comments

[irognodyci]

回答ありがとうございます。
試してみましたがクリックしてもyourHandlerの中に入らなくて、、
別の方法で実装できたので解決済みとさせていただきます。回答いただいたのにすみません。

Answer 2

クリックしたときに毎回イベントを取得して、それをbackground.jsに送ることで実装しました。
どこクリックしても取得してきてしまうので、パターンに合うもののみを取り出す処理を入れないといけないですが。

// content script
document.addEventListener('click', function(e) {
   clickedEl = e.target.outerHTML: 
}, false);
    chrome.runtime.sendMessage({

        type: "strpath",
        text: clickedEl
    });
}, false);