关于 chrome 73 版本以上,chrome 插件发起跨域请求的问题

Author Avatar
我爱吃包子 4月 17, 2019

发现问题

今天同事给我说有一个chrome 插件请求跪了,不能用了。排查后发现是请求跨域了,因为没有开发插件的经验,当时以为和 web 跨域一样解决,改下后端配置就行了(以为后端配置被别人改过)。后面在网上发现了这个cross-origin

意思就是 chrome 73 版本后扩展程序里面 content_js 文件中的 http 请求变更为跨域请求,73 版本前是非跨域请求。

解决问题

知道了问题产生的原因,解决起来就很简单了。chrome 扩展程序中 background_js 发起的 http 请求为非跨域请求,所以我们只需要将请求改到 background_js 中发起即可,然后增加 background 和 content_js 的通信就可以了。具体代码如下。

1
2
3
4
5
6
// content_js 代码如下
chrome.runtime.sendMessage({
// 需要传到 background_js 中的数据
}, (response) => {
// background_js 返回后的回调,执行你的逻辑
});
1
2
3
4
5
// backgroud_js 代码如下
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
// 执行你的逻辑,然后 sendResponse({ 逆向传给 content_js 的内容 })
// request 为 content_js 发送过来的数据
});

天真的我以为这样就解决了,运行之后,content_js 里面 response 一直报 undefined。因为 background_js 里面发送的是 ajax 请求,并不是等到有数据返回后在执行 sendResponse 。各种 google 各种查,最后查到官网下有这么一句话。

ajax

意思就是如果你要执行的是同步方法,那么你只需要将 sendResponse 放在你想返回的地方就行了。但是如果你要执行的是异步请求,想在异步请求之后在执行 sendResponse 方法,那么你就必须添加 return true;

最后

感谢 提供解决方法 以及我感觉非常好的 chrome 插件介绍 文章