この記事を書くきっかけ

あまりにも、メッセージのやり取りが思い通りに実装できなかったからです。拡張機能を作ろうと思ったきっかけはほんの軽い気持ちで始め、その時はメッセージのやり取りが本当できなく、諦めていました。そこで、ふとQiitaのトレンドに拡張機能の記事を発見し、もう一度やってみるかと思い、見事メッセージを渡すことができたのでこの記事を書こうと思います。（同様のやり方で、background?service_worler?からcontentにもメッセージを送れました。）

popup.js

// contentにメッセージを送る
chrome.tabs.query({ active: true, currentWindow: true }, aim_message);

function aim_message(tabs) {
  // 今開いているタブに、データを渡す（send_data, callbackは省略可）
  chrome.tabs.sendMessage(tabs[0].id, send_data, callback);
}

function callback(callback_data) {
  // コールバック関数の処理（popupからの値をlocalstorageに保存したり）
}

content.js

// popupからのメッセージを受け取る
chrome.runtime.onMessage.addListener((send_data, sender, callback) => {
  //何かしらの処理

  // コールバック関数の実行
  callback(callback_data);

  // おまじないで必要らしい
  return true;
});

V3のmanifest.jsonの書き方
https://qiita.com/TiggeZaki/items/bb35afe43c347d38dc4e

Chrome拡張機能 Manifest V3 popup.jsからcontent.jsにmessageを送る

この記事を書くきっかけ