はじめに

Chrome 拡張機能を React などで構成された SPA で動作させる方法 で、background から JS を注入する方法を整理した。が、別要件で上手くいかないケースがあったのでメッセージドリブンで処理タイミングを通知する方法を整理した。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. content script
    2. background script
  5. まとめ
  6. 参考文献

環境・条件

  • Chrome バージョン: 78.0.3904.70（Official Build） （64 ビット）

詳細

Content Scripts 側では chrome.runtime.onMessage.addListener でメッセージを待ち受けて、Background Scripts 側では chrome.tabs.sendMessage を使ってメッセージを送信する。

※Chrome 拡張機能を React などで構成された SPA で動作させる方法 で書いた、chrome.tabs.onUpdated.addListener を組み合わせて使っている。

content script

content.js。受信した message.type で表示する内容を変更するだけ。

1
2
3
4
5
6
7
8
9
10
11
12
(function() {
  'use strict';
  chrome.runtime.onMessage.addListener(
    function(message, sender, callback) {
      if (message.type === "hoge") {
        console.log("fuga");
      } else if (message.type === "foo") {
        console.log("bar");
      }
    }
  );
})();

background script

background.js。Google 検索の読み込みが完了したら、type = "hoge" のメッセージを送るだけ。

1
2
3
4
5
6
7
8
9
10
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
  if (changeInfo.status !== "complete") {
    return;
  }

  if (tab.url && tab.url.indexOf("https://www.google.com/search") >= 0) {
    const message = { type: "hoge" };
    chrome.tabs.sendMessage(tabId, message, null);
  }
});

まとめ

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list