Chrome 扩展异步消息传递答案

【问题标题】：Chrome extension asynchronous messagingChrome 扩展异步消息传递
【发布时间】：2021-07-27 05:30:32
【问题描述】：

我目前正在开发 Chrome 扩展程序，我想做以下事情。

content.js：

chrome.runtime.sendMessage({message: "Teszt", licenseKey: "XXXX-XXXX-XXXX-XXXX", data: "bolond"}, (response) => {
        alert(response.data);
});

background.js：

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if(request) {

        const xhr = new XMLHttpRequest();
        xhr.open("GET", `https://api.hyper.co/v4/licenses/${request.licenseKey}`);
        xhr.setRequestHeader("Authorization", `Bearer publickey`)

        xhr.onload = () => {
            sendResponse({ sender: "background.js", data: (request.data+" response")  })
        }

        xhr.send();
    }
});

它不返回任何东西，显然是因为请求需要时间来完成。我怎样才能让它异步？或者至少如何让 content.js 等到后台实际返回一些东西？

提前谢谢你！

【问题讨论】：

标签： javascript google-chrome xmlhttprequest messaging

【解决方案1】：

请查看以下文档中的simple one-time requests 部分 https://developer.chrome.com/docs/extensions/mv3/messaging/

如果要异步使用sendResponse，添加return true；到 onMessage 事件处理程序。

请尝试以下代码。它应该工作

    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if(request) {

        const xhr = new XMLHttpRequest();
        xhr.open("GET", `https://api.hyper.co/v4/licenses/${request.licenseKey}`);
        xhr.setRequestHeader("Authorization", `Bearer publickey`)

        xhr.onload = () => {
            sendResponse({ sender: "background.js", data: (request.data+" response")  })
        }

        xhr.send();
        return true;
    }
});

【讨论】：