Zenn
Open1

wxt/massaging のメモ

ひげひげ

非同期処理の結果の返り値を受け取るsendMessage

asyncを使ったsendMessageで返り値を受け取るときは、呼び出しがわの関数もasyncにしてawait sendMessage()と書く。onMessageで返り値を渡しているだけなので、呼び出したコンテンツスクリプトのtabIdは指定しなくてもいい。tabIdを指定する必要があるのはsendMessage()だけ。

background.tsx
export default defineBackground(() => {
    // onMessageのコールバック関数は非同期関数にすることもできる
    onMessage('isArchived', async (msg) => {
        const response = await fetch(msg.data);
        return response.ok
    })
});
Component.tsx
    const handleFindArchive = async () => {    // async 関数にする
        const url = createArchiveUrl(screenName, id);
        const isArchived = await sendMessage('isArchived', url) // sendMessage の前に await をつける
        alert(isArchived);
    }


// 略

            <button
                type="button"
                onClick={handleFindArchive}
                className={styles.archiveBtn}
            >
                魚拓を確認する
            </button>
utils/messaging.ts
import {defineExtensionMessaging} from "@webext-core/messaging";

interface MessageProtocol {
    isArchived: ( url: string ) => boolean;
}

export const { sendMessage, onMessage} = defineExtensionMessaging<MessageProtocol>()