Chrome插件跨域请求

Chrome插件中,可以跨域的地方只有background jspopup js这两个地方,popup js是右上角那个弹出页,只有弹出的时候才有效,所以定义跨域监听大概不现实

这样只能在background js,我们需要在background js中定义一个监听函数,来监听其他页面传过来的信息。根据传来的值,判断是否是API请求

下面是一个有getpost的简易解决方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
switch(request.type) {
case 'get':
fetch(request.url)
.then(function(response) { return response.json() })
.then(function(json) { return sendResponse(json) })
.catch(function(error) { return sendResponse(null) });
break;
case 'post':
fetch(request.url, {
method: 'POST',
mode: 'cors',
credentials: 'include',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: JSON.stringify(request.data)
})
.then(function(response) { return response.json() })
.then(function(json) { return sendResponse(json) })
.catch(function(error) { return sendResponse(null) });
break;
// 你可以定义任意内容,使用sendResponse()来返回它
case 'test':
sendResponse({'msg': 'test'});
break;
}
});

在其他页面你只需要这样调用

1
2
3
4
5
6
7
8
9
chrome.runtime.sendMessage(
{
// 里面的值应该可以自定义,用于判断哪个请求之类的
type: 'get',
url: 'https://api.xxxx.com/api?a=1&b=2' // 需要请求的url
},
json => {
console.log(json);
});

进一步学习:官方文档