chrome插件:修改ajax请求响应结果

前言

最近学习写了个Chrome插件，拦截ajax请求并修改返回结果，帮助你快速mock数据排查问题。

主要功能

• 支持XMLHttpRequest、fetch
• 支持正则表达式、HTTP请求方法匹配
• 支持404请求修改响应结果
• 支持返回结果Json、JavaScript方式编辑（内置mock.js）
• 支持JavaScript方式时通过arguments拿到原始接口信息，简单编程增加mock场景

项目地址：https://github.com/PengChen96/ajax-tools

使用

支持正则表达式、HTTP请求方法匹配

image.png

支持404请求修改响应结果

将勾选框勾上就会将404请求的status改成200

image.png

通过JS编辑返回结果

代码是通过new Function(responseText)生成函数然后执行，所以JS方式返回结果就是return的值。

示例：

const data = [];
for (let i = 0; i < 10; i++) {
  data.push({ id: i });
}
return {
  data
}

支持 mock.js 生成数据

ajax-tools.png

示例：

const data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
});
return {
  data
}

支持通过arguments拿到原始接口信息

ajax-tools.png

示例：

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