はじめに

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

TL;DR

目次

  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);
}
});

まとめ

参考文献

関連記事