chrome extension sendmessage async

devtools/2024/10/22 16:37:54/

遇到的问题：
Chrome 插件开发，需要实现 content 页面使用 chrome.runtime.sendMessage 发送消息给 background，background 需要异步处理完消息以后再发送处理结果给content 页面。

解决思路和方法：
google 找到的解决方法：
https://stackoverflow.com/questions/14094447/chrome-extension-dealing-with-asynchronous-sendmessage

关键代码（解决我问题的答案，来自链接网页）

javascript">// content.js
chrome.runtime.sendMessage({ type: "GET_FOO" }, function (response) {console.log(response.foo);
});// background.js
// replace with a real call that
// needs to run asynchronously
async function getFoo() {return "bar"
}async function sendFoo(sendResponse) {const foo = await getFoo()sendResponse({ foo })
}chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {if (request.type === "GET_FOO") {sendFoo(sendResponse)return true}}
);

直接使用到我项目里面时，发现还需要修改（为了方便阅读，我直接在上面的代码中进行修改）：代码中 getFoo 函数部分，我需要通过 $.ajax 发送一个异步请求，那么直接用 await getFoo() 就达不到效果，使用 promise 把 getFoo 改造一下就可以了。

javascript">// content.js
chrome.runtime.sendMessage({ type: "GET_FOO" }, function (response) {console.log(response.foo);
});// background.js
//reqParams是请求参数
function getFoo(reqParams) {return new Promise((resolve, reject) => {//模拟发送ajax请求结果if (true) {resolve("success")} else {resolve("fail")}});
}async function sendFoo(sendResponse, reqParams) {const foo = await getFoo(reqParams)sendResponse({ foo })
}chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {if (request.type === "GET_FOO") {const reqParams = { param1: '1', param2: '2' }sendFoo(sendResponse, reqParams)return true}}
);