8
3

More than 3 years have passed since last update.

chrome.runtime.onMessageでreturn trueしたけどundefinedが返ってきた

Last updated at Posted at 2020-07-23

最初に

タイトルの通り、内部メッセージの送受信でundefinedが返ってきたので記事に残しておきます。

なぜreturn trueが必要か分からない方は下記記事を参照してください。

本題

undefinedが返ってきた記述

background.js
chrome.runtime.onMessage.addListener( async (message, sender, sendResponse) => {
    const result = await promisefunc( message );
    sendResponse( result );
    return true;
});

求める結果が返ってきた記述

background.js
chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => {
    promisefunc( message )
    .then( result => {
        sendResponse( result );
    });
    return true;
});

両者の違いは、async/awaitかthen()のどちらで処理しているかです。

ここで下記記事を見てみると…

addListener を次のような async 関数を使って実行しないでください。

このようなリスナーは全ての受け取ったメッセージを消費するため、実際には他のリスナーがメッセージを受信したり処理することを妨げてしまいます。

注意書きで、このように記述されています。

という訳で、onMessageのcallback関数をasync関数にしたのが原因でした。

最後に

自分の失敗を書き綴るのは恥ずかしいものですね…

追加:どうしてもasync/awaitを使いたい時

わざわざ載せる程の事でもないけど一応

background.js
const func = async (message, sender, sendResponse) => {
    const result = await promisefunc(message);
    sendResponse( result );
};
chrome.runtime.onMessage.addListener( (message, sender, sendResponse) => {
    func(message, sender, sendResponse);
    return true;
});
8
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
3