Chrome 拡張機能でマウスイベントを受け取る

Google Chromeの拡張機能で表示されているページ上のマウスイベントを受け取る手順について備忘録的に投稿しておきます。

マウスイベントの取得

今回のChrome 拡張機能では、表示されているページ内でマウスポインターが重なっている要素（タグ）部分を取得してコンソールに内容を追加する動作を追加していきます。

マウスポインターがホバーした場所を取得

マウスポインターをページにホバーした際に内容をコンソールに表示するChrome 拡張機能を作っていきます。

具体的には次の手順で行います。

1. 必要なファイルとフォルダーを作成しておきます。（拡張子が無いのはフォルダー）

[MouseHover]
|-[icons]
| |-[icon-48.png]
| |-[icon-128.png]
|-[manifest.json]
|-[content.js]

2.［manifest.json］を編集して次のコードを追加します。

Chromeに表示されているコンテンツで動作するスクリプトとして、”content_scripts” を追加して対象ファイルに “content.js” を指定します。

{
  "name": "マウスホバー",
  "manifest_version": 3,
  "version": "0.1",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_icon": "icons/icon-48.png"
  },
  "content_scripts": [
  {
    "matches": ["https://*/*"],
    "js": ["content.js"],
    "run_at": "document_end",
    "all_frames": true
  }],

  "icons": {
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  }
}

3. 実際に動作するスクリプトを［content.js］を編集して次のコードを追加します。

今回は、コンソールに表示される情報を制限するためにアンカー（<A>タグ）を対象にしています。

document.addEventListener('mousemove', function (e) {
  var target = e.target;
  if (target.nodeName == 'A') {
    console.log(target.innerText);
  }
}, false);

4.［拡張機能］画面に［MouseHover］フォルダーをドラッグしてインストールします。

5. Chromeの［デベロッパーツール］を開き、表示させたページ内のハイパーリンク部分などにマウスポインターを重ねると［コンソール］にリンク部分のテキストが追加されます。

以上の手順で、拡張機能でページ内のコンテンツにマウスポインターを重ねた部分の内容を取得することが可能です。

まとめ

今回は、Google Chromeの拡張機能で表示されているページ上のマウスイベントを受け取るに手順について書きました。

Chromeに表示されているコンテンツで動作するスクリプトとして、［manifest.json］内に “content_scripts” を追加して指定した対象ファイルでマウスのイベントを取得ができます。

Google Chromeの拡張機能でマウスイベントを取得したい人の参考になれば幸いです。

スポンサーリンク

最後までご覧いただきありがとうございます。