Permissions in manifest.json
"permissions": [
"proxy",
"unlimitedStorage",
"<all_urls>",
"declarativeContent",
"browsingData",
"cookies",
"tabs",
"storage",
"notifications",
"webRequest",
"webRequestBlocking",
"http://*/*",
"https://*/*",
"debugger",
"activeTabs"
],
1. Use webRequest
Use permissions "webRequest","webRequestBlocking"
to intercept and issue a request to obtain data in the background page.
webRequest can only intercept the request. If you want to obtain the response data, you can resend the request.
const axios = require('axios');
//封装get请求
function axiosGet(url){
return new Promise((res,rej)=>{
axios.get(url).then(e=>{
res(e)
}).catch(e=>{
rej(e)
})
})
}
/**
* 拦截请求并修改指定请求头信息
*/
chrome.webRequest.onBeforeSendHeaders.addListener(async function (details) {
// 可以自行添加头部
details.requestHeaders.push({
name: 'Referer', value: 'https://h5.m.taobao.com/'});
if (details.tabId != -1) {
if (/getdetail|getdesc/.test(details.url) && !/i=6666/.test(details.url)){
let res = await axiosGet(`${
details.url}&i=6666`)
console.log('res',res)
}
}
return {
requestHeaders: details.requestHeaders };
}, {
urls: [
"*://h5api.m.taobao.com/h5/mtop.taobao.detail.*",
]
}, ['blocking', 'requestHeaders','extraHeaders']
);
2. Use debugger
Use "debugger","activeTabs"
this method for background pages
async function debuggerAttach() {
let currentTab;
let version = '1.3';
let debuggee = ''
chrome.tabs.query({
url: '所要监听页面的url'}, (tabs) => {
currentTab = tabs[0]
chrome.debugger.attach({
tabId: currentTab.id
}, version, onAttach.bind(null, currentTab.id));
});
function onAttach(tabId) {
if (chrome.runtime.lastError) {
console.log('onAttach-Error', chrome.runtime.lastError);
return
}
console.log("onAttach-Success");
chrome.debugger.sendCommand({
tabId: tabId
}, "Network.enable");
chrome.debugger.onEvent.addListener(allEventHandler);
}
function allEventHandler(debuggeeId, message, params) {
debuggee = debuggeeId
if (currentTab.id !== debuggeeId.tabId) {
console.log('currentTab.id !== debuggeeId.tabId')
return;
}
if (message === "Network.responseReceived") {
let url = params?.response?.url
chrome.debugger.sendCommand({
tabId: debuggeeId.tabId
}, "Network.getResponseBody", {
"requestId": params.requestId
}, async function (response) {
console.log('response======>', response)
}
});
}
}
console.log('关闭调试')
debuggee && chrome.debugger.detach(debuggee)
}
debuggerAttach()
3. Use ajax_interceptor_manny
This method can only intercept Fetch/XHR type data
window.ajax_interceptor_manny = {
settings: {
switchOn: false,
switchQuery:false
},
originalXHR: window.XMLHttpRequest,
myXHR: function() {
let pageScriptEventDispatched = false;
const modifyResponse = () => {
//this.responseText = overrideTxt;
//this.response = overrideTxt;
if (pageScriptEventDispatched) {
return;
}
pageScriptEventDispatched = true;
ajax_interceptor_manny.download(this.responseText, this.responseURL);
}
// new 一个原生的 XMLHttpRequest 不需要参数,将 xhr 的属性,都复制给this,暴露到外面
const xhr = new ajax_interceptor_manny.originalXHR();
for (let attr in xhr) {
if (attr === 'onreadystatechange') {
xhr.onreadystatechange = (...args) => {
if (this.readyState == 4 && this.status == 200) {
// 请求成功
if (ajax_interceptor_manny.settings.switchOn) {
// 开启拦截
modifyResponse();
}
}
this.onreadystatechange && this.onreadystatechange.apply(this, args);
}
continue;
} else if (attr === 'onload') {
xhr.onload = (...args) => {
// 请求成功
if (ajax_interceptor_manny.settings.switchOn) {
// 开启拦截
modifyResponse();
}
this.onload && this.onload.apply(this, args);
}
continue;
}
if (typeof xhr[attr] === 'function') {
this[attr] = xhr[attr].bind(xhr);
} else {
if (attr === 'responseText' || attr === 'response') {
var k = "_"+attr;
Object.defineProperty(this, attr, {
get: () => this[k] == undefined ? xhr[attr] : this[k],
set: (val) => this[k] = val,
});
} else {
Object.defineProperty(this, attr, {
get: () => xhr[attr],
set: (val) => xhr[attr] = val,
});
}
}
}
},
originalFetch: window.fetch.bind(window),
myFetch: function(...args) {
return ajax_interceptor_manny.originalFetch(...args).then((response) => {
if (response.ok) {
response.clone().text().then((res) => {
ajax_interceptor_manny.download(res, response.url);
}).catch((e) => {
console.warn(e)
});
}
return response;
});
},
download(data, url) {
try {
if (ajax_interceptor_manny.settings.switchOn) {
if (data && typeof data == "string") {
data = JSON.parse(data);
data.url = url;
}
if (data){
//遍历需要捕获的接口
captureInterfaces.forEach((item)=>{
if(data.url.indexOf(item) >-1){
console.log('data',data)
}
}
})
}
}
} catch (e) {
console.error("数据获取失败", e);
}
},
setSetting(data) {
if (typeof data !== "object") {
return;
}
//设置环境
for (var i in data) {
ajax_interceptor_manny.settings[i] = data[i];
}
},
init() {
window.XMLHttpRequest = ajax_interceptor_manny.myXHR;
window.fetch = ajax_interceptor_manny.myFetch;
}
}
ajax_interceptor_manny.init();
ajax_interceptor_manny.setSetting({
switchOn:true
})
4. Interception of script type data
You can use js to inject the interception method. If it is not obtained, you can use setTimeout to wait.
let jsonp1 = ''
let jsonp2 = ''
window.setTimeout(()=>{
window.mtopjsonpCopy1 = window.mtopjsonp1
window.mtopjsonp1 = function(res) {
console.log('@@@@@mtopjsonp1',res)
jsonp1 = res
window.mtopjsonpCopy1(res)
window.setTimeout(()=>{
window.mtopjsonpCopy3 = window.mtopjsonp3
window.mtopjsonp3 = function(res) {
console.log('@@@@@mtopjsonp3',res)
jsonp2 = res
window.mtopjsonpCopy3(res)
}
},200)
}
},200)