🐳

[Chrome拡張機能] background/content script/popupのメッセージやり取りのイメージ

2024/09/01に公開

Chrome拡張機能を作っていて、いろいろ混乱したのでまとめておきます。

各スクリプトの主な用途

大変わかりやすい図が載っている記事がありました。
tabs・runtimeと書いてあるものは、APIの名前です。

https://qiita.com/sakaimo/items/5e41d6b2ad8d7ee04b12#メッセージパッシングの関係図

メッセージを送信

    chrome.XX.sendMessage({ message: "送るよ" }, (response) => {
      //処理
    });

メッセージを受信

    chrome.XX.onMessage.addListener((request, sender, sendResponse) =>{
        console.log(request.message) //送るよ
    });

アクティブなタブを取得

background.js

    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        console.log({ tabs })
    });

すべてのタブを取得

background.js

    chrome.tabs.query({}, (tabs) => {
        console.log({ tabs })
    });

background.js（メッセージを送信）

  //この前にtabの情報(tab.id)を取得するコードを書いておく必要がある。
  
  chrome.tabs.sendMessage(tab.id, {message:'to_content_script'}, (response)=>{
      //処理
  });

content.js（メッセージを受信）

  chrome.runtime.onMessage.addListener((request, sender, sendResponse) =>{
    //処理
  });

content.jsでページの書き換えなどを行いたいときタブ情報が必要ですが、content.jsではタブ情報を得ることができません（タブIDを取得するtabs APIを使えない）。そのためtabsAPIを使用可能なbackground.jsを介してtab情報をcontentへ渡します。
メッセージパッシングの図から、background→contentではtabs APIを使用していることがわかります。

popup.js（メッセージを受信）

  chrome.runtime.sendMessage({ message: "to_background" }, (response) => {});
    //処理
  });

background.js（メッセージを送信）

  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
      //処理
  });

渡されたタブID(ページ)に対して処理を行う。