Chrome插件跨域请求

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

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

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

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;
    }
});

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

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

进一步学习:官方文档