Chrome扩展中如何检测是否存在活跃请求？

完全可以通过chrome.webRequest API实现活跃请求的检测，以下是具体实现步骤：

1. 配置扩展权限 #

在manifest.json中声明所需权限，确保扩展能监听网络请求：

{
  "manifest_version": 3,
  "name": "活跃请求检测器",
  "version": "1.0",
  "permissions": ["webRequest"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

• webRequest：核心权限，用于监听网络请求生命周期
• host_permissions：指定需要监听的域名范围，<all_urls>表示所有网站

2. 后台脚本实现请求追踪 #

在background.js中维护一个活跃请求集合，通过监听请求的不同阶段更新集合：

// 存储活跃请求的ID集合
const activeRequests = new Set();

// 请求发起时加入集合
chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    activeRequests.add(details.requestId);
    console.log(`当前活跃请求数：${activeRequests.size}`);
  },
  { urls: ["<all_urls>"] }
);

// 请求完成时移除集合
chrome.webRequest.onCompleted.addListener(
  (details) => {
    activeRequests.delete(details.requestId);
    console.log(`当前活跃请求数：${activeRequests.size}`);
  },
  { urls: ["<all_urls>"] }
);

// 请求失败/取消时移除集合
chrome.webRequest.onErrorOccurred.addListener(
  (details) => {
    activeRequests.delete(details.requestId);
    console.log(`当前活跃请求数：${activeRequests.size}`);
  },
  { urls: ["<all_urls>"] }
);

3. 额外说明 #

• 如果需要更精细的控制（比如筛选特定类型的请求），可以在监听配置中添加types字段，例如{ urls: ["<all_urls>"], types: ["xmlhttprequest", "script"] }
• 对于Manifest V2的扩展，逻辑类似，只是background字段配置为"scripts": ["background.js"]而非service worker
• 除了chrome.webRequest，也可以使用chrome.devtools.network API，但该API仅在开发者工具打开时生效，适合调试场景，后台检测优先用webRequest

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