如何用JavaScript捕获Chrome Network面板中的特定请求并触发函数

当然可以实现，下面提供两种常用的方案：

方案一：重写原生网络请求API（页面内脚本注入） #

通过重写XMLHttpRequest和fetch的原生方法，拦截所有网络请求，判断请求URL是否匹配目标资源后触发指定函数。这种方式可直接嵌入项目代码，实时监听页面内的请求：

// 拦截XMLHttpRequest请求
const originalXHRSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
  this.addEventListener('load', () => {
    const requestUrl = this.responseURL;
    // 匹配目标请求的特征（这里以包含指定文件名为例）
    if (requestUrl.includes('Rectangle-Copy-14.png')) {
      yourTargetFunction();
    }
  });
  originalXHRSend.apply(this, arguments);
};

// 拦截Fetch API请求
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  const requestUrl = typeof args[0] === 'string' ? args[0] : args[0].url;
  const response = await originalFetch(...args);
  // 匹配目标请求
  if (requestUrl.includes('Rectangle-Copy-14.png')) {
    yourTargetFunction();
  }
  return response;
};

// 你的自定义触发函数
function yourTargetFunction() {
  console.log('捕获到目标请求，执行指定逻辑');
  // 这里编写你需要执行的业务代码
}

方案二：利用Chrome DevTools协议（调试/扩展场景） #

如果用于开发调试或者Chrome扩展开发，可以借助Chrome的DevTools协议监听网络请求。你可以在DevTools控制台临时执行，或者在扩展中配置：

// 在Chrome DevTools控制台中执行
chrome.devtools.network.onRequestFinished.addListener((request) => {
  if (request.request.url.includes('Rectangle-Copy-14.png')) {
    yourTargetFunction();
  }
});

function yourTargetFunction() {
  console.log('目标请求已完成，触发函数');
}

注意：如果在Chrome扩展中使用，需要在manifest.json中声明devtools权限，并按照扩展开发规范编写代码。

两种方案对比：

• 方案一适合项目内集成，无需额外工具支持；
• 方案二更适合调试场景，无需修改页面原有代码。

内容的提问来源于stack exchange，提问作者Sacha