chrome扩展抓取请求数据返回的内容

参考文档链接
chrome.webRequest.onCompleted可以获得网络请求返回的header,但无法获取返回的内容，经过多方研究发现可以用chrome.devtools.network来获取，这丫的也搞了好久呢，一开始根本不知道怎么入手，还是看了这篇文章才有点头绪Chrome插件(扩展)开发全攻略（干货）
这个开发者工具做出来需要在控制台才能看到，话说我也是找了很久，就是可以自定义的面板，跟vue,react那些的开发工具其实是一样的，不过由于只是讲如何抓取数据，这个页面就随便啦，长什么样子都无所谓，像上面那篇链接的文章里说的只是要一个html文件来引入真正需要用到的js文件
哦，说下用的版本是2的，“manifest_version”: 2, 虽然说现在出了3

首先在配置文件中配置开发工具页面，必须是html文件，虽然它好像除了引入js文件外并没什起到什么用处

下图是完整是配置文件

devtools.html 就是这样子的，只是为了引入js文件而已

真正有用的在devtools.js中
chrome.devtools.network.onRequestFinished 当网络请求完成并且所有请求的数据都可用时产生，可以获取到当前页面的所有请求，但是我并不需要所有的，我只需要我想要的那个接口返回的数据，所以后面通过判断 url 来只拿需要的数据，再getContent()来获取内容 chrome.runtime.sendMessage()将内容发送给后台。
另外，在devtool中是没办法用console打印的。
到这里其实就拿到数据了，后面的看自己需要怎么处理这些数据。

然后在background.js中拿到数据，message 就是从devtools.js中发送过来的数据，可以自行处理成想要的，下面有些chrome需要的可以借鉴。

在cs.js中处理获得的数据