一个拦截ajax请求并修改请求、响应信息的Chrome插件

写了一个 Chrome 插件Ajax Interceptor Tools，使用这个插件，你可以通过 JSON 或 JavaScript 代码片段来编辑并修改响应结果，还支持使用 Mock.js 语法生成随机数据。另外还可以修改请求地址、请求头等内容，并且插件支持分组、导入/导出规则配置等。

使用

QuicklyAddRequestsForModification.gif

一、修改Response响应结果

在Response编辑器中，您可以选择：
1、使用JSON/JavaScript格式编辑响应结果
2、转发原始响应结果（如果清空Response编辑器，将会把原始响应结果转发给应用程序）

1、 使用JSON格式编辑响应结果

示例：

{
  "status": 200,
  "response": "OK"
}

2、 使用JavaScript格式编辑响应结果

使用JS方式编辑响应结果时，通过new Function(responseText)生成函数并执行，响应结果即为函数的返回值。

2.1. 简单JavaScript片段

示例：

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

2.2. 使用 mock.js 生成随机数据

示例：

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

将生成类似以下数据：

// ==>
{
    "list": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}

2.3. 从arguments获取原始数据，简单编程创建场景

示例：

let { method, payload, originalResponse } = arguments[0];
if (method === 'get') { // 请求方式
  // do something
}
if (payload) { // 入参 { queryStringParameters，requestPayload }
  // do something
}
return {
  "status": 200,
  "response": originalResponse
};

二、修改Request请求信息

在Request面板中，您可以选择修改请求URL、method、headers和payload。

1. 修改请求URL和method

例下图中，将会把匹配到的/auth/login请求路径替换为/auth/login2，并把请求方法改为POST，您可以打开devtools在Network面板中看到替换后的请求。

2. 修改请求headers

例下图中，将会把请求headers中的Content-Type替换为application/json。

3. 修改请求payload

例下图中，将会在入参中新增test: test123，您可以打开devtools在Network面板中看到请求体的修改。

三、支持导入/导出

SupportImportExportOfRuleConfigurations.gif

下载

项目地址：https://github.com/PengChen96/ajax-tools
谷歌商店：https://chrome.google.com/webstore/detail/ajax-interceptor-tools/kphegobalneikdjnboeiheiklpbbhncm