拦截ajax请求并修改响应结果的Chrome插件

前言

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

主要功能

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

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

使用

请添加图片描述

通过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

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是大致的步骤: 1. 创建一个新的Chrome插件项目,可以在manifest.json文件中指定需要的权限,例如拦截网络请求和访问DOM。 2. 在background.js文件中编写拦截请求的代码。可以使用chrome.webRequest.onBeforeRequest监听XMLHttpRequest和fetch请求,并在回调函数中修改响应结果。 ```javascript chrome.webRequest.onBeforeRequest.addListener( function(details) { // 拦截请求修改响应结果 return {redirectUrl: "data:text/plain;charset=UTF-8," + encodeURIComponent("Hello, World!")}; }, {urls: ["<all_urls>"]}, ["blocking"] ); ``` 3. 在manifest.json文件中指定需要注入的内容脚本,例如可以在所有页面注入一个JS文件,以便在页面上修改响应结果。 ```json "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] } ] ``` 4. 在content.js文件中编写修改响应结果的代码。可以使用MutationObserver监听DOM的变化,并在回调函数中修改响应结果。 ```javascript var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { // 修改响应结果 mutation.target.textContent = "Hello, World!"; }); }); observer.observe(document, {subtree: true, characterData: true, childList: true}); ``` 5. 打包并安装插件。在Chrome浏览器中打开扩展程序页面,点击“加载已解压的扩展程序”按钮,选择插件的根目录,即可安装插件并测试拦截修改请求的功能。 以上是一个简单的拦截修改请求Chrome插件的步骤,具体实现还需要根据自己的需求进行调整。希望这些信息能对你有所帮助!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值