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

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

一、背景与问题

在Web开发中，有时需要对页面发起的AJAX请求进行拦截和修改响应数据。这种需求常见于以下场景：

接口调试：开发阶段模拟接口返回数据
数据脱敏：生产环境对敏感数据进行脱敏处理
功能测试：模拟特定业务场景的响应数据
安全测试：验证系统对异常数据的处理能力

传统方法需要修改前端代码，而Chrome扩展提供了更优雅的解决方案。但这项技术存在诸多挑战：

如何准确拦截所有AJAX请求？
如何在不破坏原有功能的前提下修改响应数据？
如何处理跨域请求和HTTPS安全限制？
如何避免对页面性能产生负面影响？

二、基本原理

Chrome扩展通过三个核心机制实现AJAX拦截：

Content Scripts：注入页面的脚本，可访问DOM和页面上下文
Background Scripts：长期运行的后台脚本，可处理复杂的逻辑
chrome.webRequest API：提供对网络请求的全面控制

关键流程如下：

使用chrome.webRequest.onSendHeaders监听请求头
使用chrome.webRequest.onResponseStarted拦截响应内容
在后台脚本中创建新的响应对象，注入修改后的数据

需要特别注意：Chrome插件对AJAX请求的拦截存在严格限制，如需修改响应内容必须使用onResponseStarted事件，且无法直接修改XMLHttpRequest对象。

三、环境准备

开发工具：
- Chrome 浏览器
- VSCode 编辑器
- Chrome 扩展开发工具（通过chrome://extensions/页面加载）
依赖项：
- Chrome 88+（支持chrome.webRequest API）
- Node.js（可选，用于打包扩展）

开发目录结构：

my-extension/
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
└── icons/
 ├── icon16.png
 ├── icon48.png
 └── icon128.png

四、核心实现

1. 基础拦截逻辑（content script）

// content.js
(function() {
  const originalOpen = XMLHttpRequest.prototype.open;
  const originalSend = XMLHttpRequest.prototype.send;

  XMLHttpRequest.prototype.open = function() {
    this._originalOpen.apply(this, arguments);
    this._requestUrl = arguments[1];
  };

  XMLHttpRequest.prototype.send = function(data) {
    this._originalSend.apply(this, arguments);
    
    // 拦截请求
    const xhr = this;
    const originalOnload = xhr.onload;
    
    xhr.onload = function() {
      if (xhr._requestUrl && xhr.responseType !== 'text') {
        // 转换为文本响应
        const reader = new FileReader();
        reader.onload = function() {
          const textResponse = reader.result;
          // 处理响应数据
          const modifiedResponse = modifyResponse(textResponse);
          xhr.responseText = modifiedResponse;
          originalOnload.apply(xhr);
        };
        reader.readAsText(xhr.response);
      } else {
        originalOnload.apply(xhr);
      }
    };
  };
})();

关键点说明：

重写XMLHttpRequest的open和send方法
使用FileReader处理非文本响应
通过onload事件处理响应数据

2. 响应修改逻辑（background script）

// background.js
chrome.webRequest.onResponseStarted.addListener(
  (details) => {
    // 判断是否需要处理
    if (details.url.includes('api.example.com')) {
      // 创建新的响应对象
      const modifiedResponse = modifyResponse(details.responseBody);
      
      // 构造新的响应内容
      const newResponse = new Response(modifiedResponse, {
        status: 200,
        statusText: 'OK'
      });
      
      // 替换原始响应
      chrome.webRequest.onResponseStarted.removeListener(this.listener);
      chrome.webRequest.onResponseStarted.addListener(
        (details) => {
          if (details.url === details.url) {
            chrome.webRequest.onResponseStarted.removeListener(this.listener);
            chrome.webRequest.onResponseStarted.addListener(
              (details) => {
                // 处理响应
              }
            );
          }
        },
        { urls: ['https://api.example.com/*'] }
      );
    }
  },
  { urls: ['https://api.example.com/*'] },
  ['responseBody']
);

3. 响应数据处理（辅助函数）

// utils.js
function modifyResponse(data) {
  try {
    const parsed = JSON.parse(data);
    // 修改响应数据逻辑
    parsed.data = parsed.data.map(item => ({
      ...item,
      price: item.price * 0.8 // 8折处理
    }));
    return JSON.stringify(parsed);
  } catch (e) {
    return data; // 保留原始数据
  }
}

五、完整案例

1. 项目结构

my-extension/
├── manifest.json
├── background.js
├── content.js
├── popup.html
├── popup.js
└── utils.js

2. manifest.json配置

{
  "manifest_version": 3,
  "name": "AJAX Interceptor",
  "version": "1.0",
  "description": "Intercept and modify AJAX requests",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

3. 完整案例说明

假设需要拦截https://api.example.com/data的请求，将返回数据中的价格字段修改为8折：

安装扩展后，所有访问该接口的请求都会被拦截
在background.js中定义处理逻辑
使用modifyResponse函数修改价格字段
通过chrome.webRequest.onResponseStarted事件处理响应内容
最终用户看到的是修改后的数据

六、源码解析

1. 高级拦截机制

chrome.webRequest.onResponseStarted.addListener(
  (details) => {
    // 判断是否需要处理
    if (details.url.includes('api.example.com')) {
      const reader = new FileReader();
      reader.onload = () => {
        const textResponse = reader.result;
        const modifiedResponse = modifyResponse(textResponse);
        
        // 构造新的响应
        const newResponse = new Response(modifiedResponse, {
          status: 200,
          statusText: 'OK'
        });
        
        // 替换原始响应
        chrome.webRequest.onResponseStarted.removeListener(this.listener);
        chrome.webRequest.onResponseStarted.addListener(
          (details) => {
            if (details.url === details.url) {
              chrome.webRequest.onResponseStarted.removeListener(this.listener);
              chrome.webRequest.onResponseStarted.addListener(
                (details) => {
                  // 处理响应
                }
              );
            }
          },
          { urls: ['https://api.example.com/*'] }
        );
      };
      reader.readAsText(details.responseBody);
    }
  },
  { urls: ['https://api.example.com/*'] },
  ['responseBody']
);

关键点解析：

使用FileReader读取响应体
构造新的Response对象
通过事件监听器替换原始响应
避免递归调用导致的性能问题

七、进阶使用

1. 动态配置

// background.js
chrome.storage.local.get(['modifyPrice'], (data) => {
  const shouldModify = data.modifyPrice || false;
  
  chrome.webRequest.onResponseStarted.addListener(
    (details) => {
      if (shouldModify && details.url.includes('api.example.com')) {
        // 处理逻辑
      }
    },
    { urls: ['https://api.example.com/*'] },
    ['responseBody']
  );
});

2. 响应类型处理

function handleResponse(data, contentType) {
  if (contentType.startsWith('application/json')) {
    return modifyJsonResponse(data);
  } else if (contentType.startsWith('text/html')) {
    return modifyHtmlResponse(data);
  }
  return data;
}

3. 重试机制

chrome.webRequest.onResponseStarted.addListener(
  (details) => {
    if (details.url.includes('api.example.com')) {
      const reader = new FileReader();
      reader.onload = () => {
        const textResponse = reader.result;
        const modifiedResponse = modifyResponse(textResponse);
        
        // 重试逻辑
        const retryCount = 3;
        const retryInterval = 1000;
        
        let retryCount = 0;
        const retry = () => {
          if (retryCount < retryCount) {
            retryCount++;
            setTimeout(() => {
              // 重新发送请求
            }, retryInterval);
          }
        };
        
        retry();
      };
      reader.readAsText(details.responseBody);
    }
  },
  { urls: ['https://api.example.com/*'] },
  ['responseBody']
);

八、性能与工程实践

1. 性能优化策略

优化措施	说明
使用缓存	对相同请求进行缓存，避免重复处理
异步处理	使用Promise避免阻塞主线程
资源限制	限制同时处理的请求数量
事件节流	使用`setInterval`控制处理频率

2. 异常处理机制

chrome.webRequest.onResponseStarted.addListener(
  (details) => {
    try {
      // 处理逻辑
    } catch (e) {
      console.error('处理异常:', e);
      // 记录日志
      chrome.runtime.sendMessage({ error: e });
    }
  },
  { urls: ['https://api.example.com/*'] },
  ['responseBody']
);

3. 安全增强措施

使用chrome.storage保存配置
对敏感数据进行加密处理
限制处理的URL范围
添加请求签名验证
使用Content Security Policy防止注入攻击

九、常见问题与踩坑

1. 常见错误

错误类型	原因	解决方案
权限不足	没有添加`webRequest`权限	在manifest.json中添加`"permissions": ["webRequest", "webRequestBlocking"]`
响应未修改	未正确处理响应内容	使用`FileReader`读取响应体
多次触发	未移除监听器	在`onResponseStarted`事件中移除监听器
响应丢失	未正确构造新的响应	使用`Response`对象构造新响应
跨域问题	未处理跨域请求	添加`"permissions": ["<all_urls>"]`

2. 高级问题

问题：如何处理HTTPS证书错误？

解决方案：在manifest.json中添加"permissions": ["<all_urls>", "certificateError"]，并使用chrome.webRequest.onCertificateError处理证书错误。

问题：如何处理请求重定向？

解决方案：使用chrome.webRequest.onBeforeRequest事件处理重定向逻辑，通过redirectUrl字段控制重定向行为。

十、最佳实践

权限最小化原则：只申请必要的权限，避免过度授权
配置管理：使用chrome.storage保存用户配置
日志记录：添加详细的日志记录，便于调试
资源限制：对同时处理的请求进行限制，防止资源耗尽
安全验证：对修改的数据进行校验，防止恶意篡改
性能监控：添加性能监控代码，及时发现性能瓶颈
版本管理：使用manifest_version控制插件版本

十一、总结

拦截AJAX请求并修改响应结果是Chrome插件开发中的高级技巧，需要深入理解浏览器的网络请求机制和扩展API。通过合理使用chrome.webRequest API，可以实现对网络请求的全面控制。但需要注意以下事项：

使用场景：适合测试、调试、数据脱敏等非生产环境使用
性能影响：需要优化处理逻辑，避免影响页面性能
安全风险：可能被滥用，需要严格控制权限和数据验证
兼容性问题：注意不同Chrome版本的API差异

通过合理的设计和实现，这项技术可以为Web开发带来显著的价值。但需要谨慎使用，特别是在涉及敏感数据和生产环境时，应采取额外的安全措施。