【chrome扩展】如何过滤异步接口以及请求参数

前段时间有小伙伴想方便的获取某个网站的异步接口的地址以及请求参数，还有请求域名的区分，业余时间就做了个chrome扩展，方便可视化使用。

首先manifest.json就不详细介绍了这块主要提两个地方

"content_scripts": [{
   "matches": ["https://*.ibeeger.com/*","https://*.ibeeger-dev.com/*"],
   "js": ["js/content-scripts.js"],
   "css": ["css.css"],
   "run_at": "document_start"
}

•  matches 匹配插件启用的域名 如果是所有域名可以这样设置 ["<all_urls>"]
• js 匹配到的路由自动都包含了content-script.js 里面可以访问dom节点等等，就像引入了js文件

"background": {
    "scripts": ["background.js"]
},

• background 浏览器启动的时候 background.js 就运行了这里调用chrome扩展的一些api这次只用到了 chrome.webRequest 咱们只针对这一点介绍。

然后通信方式：默认background.js 和 content是没有关系的，即时设置的全局变量 两个地方也是独立的，这就需要咱们手动建立起来链接，用于数据传输

// content.js

var port = chrome.runtime.connect({
	name: 'content'
});

port.onMessage.addListener(
	function(req, port) {
		let _url = new URL(req['url']);
		if (hostname.indexOf(_url.hostname) == -1) {
			hostname.push(_url.hostname)
		}
		list.push(req)
		item.hostname = Date.now()
		item.list = Date.now()
	}
);


// background.js

chrome.runtime.onConnect.addListener(function(port) {
	port.onMessage.addListener(
		function (result) {}
	)
    port.postMessage({
		 result: contents
	})
});

知道建立链接已经数据如何通信，现在可以去看下chrome.webRequest

 https://developer.chrome.com/extensions/webRequest

如题所示这个api提供的所有事件侦听方式，我们这次只用到了 onBeforeRequest 

chrome.webRequest.onBeforeRequest.addListener(onBeforeRequestListener, {
    urls: ["https://*.ibeeger.com/*","https://*.ibeeger-dev.com/*"]
}, ["requestBody", "blocking"]);

侦听之后的数据 onBeforeRequestListener 可以发送到content 打印看下， 因为background里面你即时 console.log 控制台也不会输出任何信息。

好了上个成品的截图，

最后祝大家工作顺心，每天都有好心情~~~