Open chenxiaochun opened 4 years ago
最近开发一个 Chorme 插件,需要在https://item.jd.com上发起请求加载我们系统中的一个接口数据。一开始我是直接在页面中发起fetch请求,立刻就遇到了两个问题。
https://item.jd.com
fetch
第一个问题是https://item.jd.com使用的是https协议。而我们的系统因为只能在内网访问,所以只是http协议的网站。当在页面中直接发起fetch请求时,浏览器会认为它不是一个安全的请求,会直接给你 block 掉:
https
http
Mixed Content: The page at 'https://item.jd.com/100011503930.html' was loaded over HTTPS, but requested an insecure resource 'http://hdj.jd.com/api/test'. This request has been blocked; the content must be served over HTTPS.
第二是即使解决了访问协议不同问题,依然不可能会从我们系统中拿到数据。因为还会有跨域的问题。
后来改用在浏览器插件对应的content.js中使用chrome.extension.sendRequest发起请求,此函数支持两个参数:
content.js
chrome.extension.sendRequest
title,用来表示发起的请求类型 api,是需要实际获取数据的 api 接口
title
api
background.js
chrome.extension.sendRequest({ title: 'getData', api: 'http://hdj.jd.com/getData.json' }, (resData: any) => { console.log(resData) })
在background.js中使用chrome.extension.onRequest.addListener监听发起的请求。它接受一个回调函数,其中第一个回调参数message就是上面的sendRequest传递进来的参数值
chrome.extension.onRequest.addListener
message
sendRequest
从它里面取出title值,用来判断是不是需要发起的请求
chrome.extension.onRequest.addListener((message, sender, sendResponse) => { if (message.title === 'getData') { fetch(message.api) .then((response) => { return response.json() }) .then((data) => { sendResponse(data) }) } })
然后在background.js中正常发起fetch请求。将拿到的数据使用回调函数的第三个参数sendResponse返回到content.js中,也就能拿到数据了:
sendResponse
sendResponse(data)
这里要注意:在background.js中使用console.log打印的信息,是不会显示在当前页面的控制台中。你需要打开浏览器的扩展,点击”background page“打开一个独立的控制台,就能看到它的打印信息了
console.log
这种方法理论上绕过了任何跨域限制,可以实现在任意网站中去请求另一个网站的数据(当然,前提是得有权限)。但是,如果要将插件发布到 Chrome AppStore 上,是否能过审,个人就不清楚了😂
事情背景
最近开发一个 Chorme 插件,需要在
https://item.jd.com
上发起请求加载我们系统中的一个接口数据。一开始我是直接在页面中发起fetch
请求,立刻就遇到了两个问题。第一个问题是
https://item.jd.com
使用的是https
协议。而我们的系统因为只能在内网访问,所以只是http
协议的网站。当在页面中直接发起fetch
请求时,浏览器会认为它不是一个安全的请求,会直接给你 block 掉:第二是即使解决了访问协议不同问题,依然不可能会从我们系统中拿到数据。因为还会有跨域的问题。
解决办法
后来改用在浏览器插件对应的
content.js
中使用chrome.extension.sendRequest
发起请求,此函数支持两个参数:title
,用来表示发起的请求类型api
,是需要实际获取数据的 api 接口background.js
中返回的数据在
background.js
中使用chrome.extension.onRequest.addListener
监听发起的请求。它接受一个回调函数,其中第一个回调参数message
就是上面的sendRequest
传递进来的参数值从它里面取出
title
值,用来判断是不是需要发起的请求然后在
background.js
中正常发起fetch
请求。将拿到的数据使用回调函数的第三个参数sendResponse
返回到content.js
中,也就能拿到数据了:这里要注意:在
background.js
中使用console.log
打印的信息,是不会显示在当前页面的控制台中。你需要打开浏览器的扩展,点击”background page“打开一个独立的控制台,就能看到它的打印信息了结语
这种方法理论上绕过了任何跨域限制,可以实现在任意网站中去请求另一个网站的数据(当然,前提是得有权限)。但是,如果要将插件发布到 Chrome AppStore 上,是否能过审,个人就不清楚了😂