如何在Web扩展的onBeforeRequest中调用Fetch并等待响应做拦截判断

这种需求可行，但浏览器支持情况存在差异：

• Chrome的webRequest API仅支持在请求发送前（onBeforeRequest阶段）拦截，无法先获取响应内容再回溯阻止请求，因此无法直接实现你的需求。
• Firefox的WebExtensions API提供了更灵活的响应处理能力，可以通过拦截响应流、分析内容后决定是否阻断/修改响应，间接实现“根据响应分析结果控制请求最终是否生效”的效果。

Firefox扩展示例 #

1. manifest.json 配置 #

需要声明必要的权限和后台脚本：

{
  "manifest_version": 2,
  "name": "Response Analyzer & Blocker",
  "version": "1.0",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "<all_urls>" // 或替换为你需要监控的具体URL列表
  ],
  "background": {
    "scripts": ["background.js"]
  }
}

2. background.js 核心逻辑 #

实现URL匹配、响应拦截分析、结果处理：

// 本地定义需要监控的URL列表（支持通配符）
const targetUrls = [
  "*://example.com/api/*",
  "*://test.org/data/*"
];

// 监听请求，允许发送并标记后续需处理响应
browser.webRequest.onBeforeRequest.addListener(
  (details) => {
    return { cancel: false };
  },
  { urls: targetUrls },
  ["blocking"]
);

// 拦截并处理响应流
browser.webRequest.onHeadersReceived.addListener(
  (details) => {
    const filter = browser.webRequest.filterResponseData(details.requestId);
    const decoder = new TextDecoder("utf-8");
    const encoder = new TextEncoder();
    let responseContent = "";

    // 逐段读取响应内容
    filter.ondata = (event) => {
      responseContent += decoder.decode(event.data, { stream: true });
    };

    // 响应读取完成后执行分析逻辑
    filter.onstop = () => {
      // 替换为你的特定分析规则
      const shouldBlock = responseContent.includes("敏感内容");

      if (shouldBlock) {
        // 阻断响应：返回自定义提示内容
        filter.write(encoder.encode("请求已被拦截，响应内容不符合要求"));
      } else {
        // 放行响应：将原内容写回
        filter.write(encoder.encode(responseContent));
      }
      filter.close();
    };

    // 处理响应读取错误
    filter.onerror = () => filter.close();

    return { cancel: false };
  },
  { urls: targetUrls },
  ["blocking", "responseHeaders"]
);

代码说明 #

• targetUrls：替换为你需要监控的具体URL，支持通配符匹配规则。
• onBeforeRequest：仅标记需要处理的请求，不拦截发送，确保请求能正常获取响应。
• filterResponseData：获取响应数据流，逐段拼接完整内容后执行分析。
• 分析逻辑：在onstop回调中完成响应内容的判断，根据结果决定返回阻断提示或原响应内容。

内容的提问来源于stack exchange，提问作者Martynas Jurkėnas