欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 美景 > chrome extension sendmessage async

chrome extension sendmessage async

2025/3/17 9:48:21 来源:https://blog.csdn.net/sleepingboy888/article/details/141603413  浏览:    关键词:chrome extension sendmessage async

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

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

  • 关键代码(解决我问题的答案,来自链接网页)
// 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 改造一下就可以了。
// 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}}
);

这些是解决问题的思路,重点是:

  • chrome.runtime.onMessage.addListener 中 return true
  • 使用JS异步函数技术编写相关代码

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词