前言
最近学习写了个Chrome插件，拦截ajax请求并修改返回结果，帮助你快速mock数据排查问题。
主要功能
- 支持XMLHttpRequest、fetch
- 支持正则表达式、HTTP请求方法匹配
- 支持404请求修改响应结果
- 支持返回结果Json、JavaScript方式编辑（内置mock.js）
- 支持JavaScript方式时通过arguments拿到原始接口信息，简单编程增加mock场景
项目地址：https://github.com/PengChen96/ajax-tools
使用
支持正则表达式、HTTP请求方法匹配
支持404请求修改响应结果
将勾选框勾上就会将404请求的status改成200
通过JS编辑返回结果
代码是通过new Function(responseText)生成函数然后执行，所以JS方式返回结果就是return的值。
示例：
const data = [];
for (let i = 0; i < 10; i++) {
data.push({ id: i });
}
return {
data
}
支持 mock.js 生成数据
示例：
const data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
});
return {
data
}
支持通过arguments拿到原始接口信息
示例：
let { method, payload, originalResponse } = arguments[0];
if (method === 'get') { // 请求方式
// do something
}
if (payload) { // 入参 { queryStringParameters，requestPayload }
// do something
}
return originalResponse;
原理
大致就是Chrome扩展在加载时向页面中注入js代码，js代码会替换window上的XMLHttpRequest和fetch，新的XMLHttpRequest和fetch会做一些处理，根据匹配的请求路径，然后将对应的响应结果覆盖成你设置的值。支持JS方式编辑是使用了new Function（）去生成函数然后执行。
核心代码
function myXHR () {
const xhr = new XMLHttpRequest();
// ...
xhr.onreadystatechange = (...args) => {
// 请求完成
if (this.readyState === this.DONE) {
// 覆盖响应结果
this.responseText = overrideText;
this.response = overrideText;
}
this.onreadystatechange && this.onreadystatechange.apply(this, args);
}
xhr.onload = (...args) => {
// 覆盖响应结果
// ...
this.onload && this.onload.apply(this, args);
}
// ...
}
插件下载
谷歌商店：https://chrome.google.com/webstore/detail/ajax-interceptor-tools/kphegobalneikdjnboeiheiklpbbhncm
直接下载：https://raw.githubusercontent.com/PengChen96/ajax-tools/master/kphegobalneikdjnboeiheiklpbbhncm.crx
感谢您的阅读，欢迎使用
参考：
https://developer.chrome.com/docs/extensions/mv3/intro/
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/XMLHttpRequest
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
https://github.com/YGYOOO/ajax-interceptor
