More than 1 year has passed since last update.

[Chrome拡張]　Webページ(content scripts)からChrome拡張画面へメッセージを送る方法

Last updated at 2023-07-06Posted at 2023-06-19

Webページ(content scripts)からChrome拡張画面(menu.html)へメッセージを
送る方法をご紹介します。（ManifestV3対応です）

新しく作成したchrome拡張を公開しました。
そこで使用した技術を備忘録として共有できればと思い、記事を書いています。
こちらがそのChrome拡張の記事です。ご興味があれば

用意するファイル

root/
 　├ manifest.json
 　├ menu.html
 　├ js/
 　│　 ├ background.js
 　│　 ├ menu.js
 　│　 ├ script.js
 　│　 └ jquery-3.5.1.min.js
 　└ img/
 　　  ├ icon32.png
  　　 └ icon48.png

menu.html

まずは、Chrome拡張メニューのアイコンをクリックした際に表示させるHTMLページを用意します。
今回は、「manifest.json」と同じ階層に「menu.html」、
「js」フォルダを用意して「jquery-3.5.1.min.js」と「menu.js」を用意しました。
div#send_inputに、Webページから送られてきたメッセージを表示します。

<!DOCTYPE HTML>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>ページからのメッセージ送信テスト</title>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/menu.js"></script>
  </head>
  <body>
    <div id="send_input" style="width:100%;"></div>
  </body>
</html>

menu.js

次に「menu.html」で行われた操作を処理する「menu.js」を「js」フォルダ以下に作成します。
webページから送られてきたメッセージをdiv#send_inputに表示します。

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  $("#send_input").append($("<div>"+request+"</div>"));
});

manifest.json

permissionsは不要です。
matchesは私が書いた記事を書き換えますのでhttps://qiita.com/doran/items/*を指定します。

{
  "name": "ページからのメッセージ送信テスト",
  "version": "1.00",
  "description": "ページからのメッセージ送信テスト",
  "permissions": [],
  "background": {
    "service_worker": "js/background.js"
  },
  "action": {
    "default_icon": {
      "32": "images/icon32.png"
    }
  },
  "icons": {
    "48": "images/icon48.png"
  },
  "content_scripts": [
    {
      "matches": ["https://qiita.com/doran/items/*"],
      "js": ["js/jquery-3.5.1.min.js","js/script.js"]
    }
  ],
  "manifest_version": 3
}

・background
　　backgroundで実行されるjsを指定します。
・action
　・default_icon
　　　　ツールバーに表示されるアイコンを指定します。
・icons
　　menu.htmlのファビコンを指定します。
・content_scripts
　・matches
　　　　content_scriptsを読み込むページのURLを指定します。
　　　　この指定に当てはまらないURLの場合は、content_scriptsは読み込まれせん。
　・js
　　　content_scriptsのソースと、そこで使用するjsを指定します。

background.js

Chromeブラウザのツールバーにあるアイコンがクリック時に「menu.html」を
新しいタブで開くためにbackgroundを用意します。

chrome.action.onClicked.addListener(function(){
  chrome.tabs.create({"url": "menu.html"});
});

script.js

content_scriptsのmatchesで指定したアドレスと一致するページで実行されるJS。
記事のタイトル部分をクリックしたら、Chrome拡張画面(menu.html)へ記事のタイトルをメッセージで送信します。

$(document).on("click",".p-items_main h1",function(){
 	chrome.runtime.sendMessage($(this).text());
});

実行結果

1.https://qiita.com/doran/items/から続くURLの記事を2つほど開いておきます。

2.記事のタイトル部分をクリックします。

3.Chrome拡張画面(menu.html)へメッセージ(記事のタイトル)が飛びました。

4.もう1個開いて、記事のタイトル部分をクリックします。

5.Chrome拡張画面(menu.html)へメッセージ(記事のタイトル)が飛びました。

おしまい。。。