chrome拡張で、contents scriptとpopupで非同期処理のやり取りをしたいです

Question

前提

chrome拡張機能の開発をしています。
contents scriptで非同期処理を行い、popupに非同期処理の結果を送りたいのですが、うまく機能していないようなので質問させていただきます。

発生している問題

下に記述したコードの、contents-script.ts:12のconsole.log(r)では1と出力されることを確認しました。
popup.ts:10のconsole.log(item)ではundefinedとなりました。
popup.ts:10で1が出力されるようにしたいです。

該当のソースコード

contents-script.ts

const asyncTest = async () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(1)
    }, 1000)
  })
}

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  if(request.message == "popup.load_start"){
    asyncTest().then((r) => {
      console.log(r);
      sendResponse(r)
    })
  }
});

export {}

popup.ts

function Hoge() {
  const getMessage = () => {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      if (!tabs[0].id) {
        return;
      }
      chrome.tabs.sendMessage(
        tabs[0].id,
        { message: 'popup.load_start' },
        function (item) {
          console.log(item)
        }
      );
    });
  };
  // ...
  return (
     <button onClick={getMessage}>読み込み</button>
  )
}

ご指導お願いいたしますm(__)m

Answer 1

sendResponse を使用した非同期の応答の送信

    asyncTest().then((r) => {
      console.log(r);
      sendResponse(r)
    })
    return true; // 追加

とすればよさそうです。

Comments

[tb700]

ありがとうございます！
動きました！