Firefox扩展webRequest.filterResponseData报错‘Invalid request ID’求助

尝试在Firefox扩展中通过webRequest API获取网站API调用的响应体，但调用webRequest.filterResponseData时始终返回“Invalid request ID”错误。已锁定目标URL，监听器能正常触发，但用requestId创建过滤器时失败，过滤器状态为uninitialized，所有过滤器事件都不触发。

原代码 #

background.js #

const reqFilter = {
  urls: ["<target>"],
};

function listener(details) {
  let filter = browser.webRequest.filterResponseData(details.requestId);

  filter.onstart = (event) => {
    console.log("start called");
    console.log(event.data);
  };

  const data = [];
  filter.ondata = (event) => {
    console.log("data called");
    data.push(event.data);
    filter.disconnect();
  };

  filter.onerror = (event) => {
    console.log(filter.error);
  };

  console.log("at the end");
  return {};
}

browser.webRequest.onCompleted.addListener(listener, reqFilter);

console.log("extension started");

manifest.json #

{
  "manifest_version": 2,
  "name": "<Name>",
  "version": "1.0",

  "description": "<Description>",

  "permissions": [
    "webRequest",
    "<all_urls>",
    "webRequestBlocking",
    "webRequestFilterResponse"
  ],

  "icons": {
    "48": "icons/logo48.png"
  },

  "background": {
    "scripts": ["background.js"]
  }
}

问题根源 #

1. 事件时机错误：webRequest.filterResponseData仅能在请求未完成的阶段调用，比如onBeforeRequest或onHeadersReceived事件。当前使用的onCompleted事件是在请求完全结束后触发的，此时对应的requestId已失效，无法创建有效过滤器。
2. 缺少阻塞选项：使用响应过滤器时，监听器必须声明["blocking"]选项，否则无法拦截并处理响应数据流。

修正方案 #

修正后的background.js #

const reqFilter = {
  urls: ["<target>"], // 替换为实际目标API URL
};

function listener(details) {
  const filter = browser.webRequest.filterResponseData(details.requestId);
  const decoder = new TextDecoder("utf-8");
  const encoder = new TextEncoder();
  const dataChunks = [];

  // 接收响应数据块
  filter.ondata = (event) => {
    dataChunks.push(event.data);
  };

  // 数据接收完成后处理
  filter.onstop = () => {
    // 合并所有数据块并解码为文本
    const combinedBuffer = new Uint8Array([].concat(...dataChunks.map(chunk => Array.from(chunk))));
    const responseBody = decoder.decode(combinedBuffer);
    console.log("获取到的响应体:", responseBody);

    // 必须将数据写回，否则页面无法收到响应
    filter.write(encoder.encode(responseBody));
    filter.disconnect();
  };

  // 捕获过滤器错误
  filter.onerror = () => {
    console.error("过滤器错误:", filter.error);
    filter.disconnect();
  };

  // 放行请求，确保页面能继续处理
  return { cancel: false };
}

// 使用onBeforeRequest事件，并添加blocking选项
browser.webRequest.onBeforeRequest.addListener(
  listener,
  reqFilter,
  ["blocking"]
);

console.log("extension started");

修正后的manifest.json（权限配置正确，无需改动） #

{
  "manifest_version": 2,
  "name": "<Name>",
  "version": "1.0",
  "description": "<Description>",
  "permissions": [
    "webRequest",
    "<all_urls>",
    "webRequestBlocking",
    "webRequestFilterResponse"
  ],
  "icons": {
    "48": "icons/logo48.png"
  },
  "background": {
    "scripts": ["background.js"]
  }
}

关键注意点 #

• 处理完响应数据后必须调用filter.write()将数据写回，否则目标页面会无法接收响应。
• 如果需要修改响应内容，可在onstop事件中修改后再写回；若仅需读取，直接写回原数据即可。
• 确保<target>替换为实际的目标URL，支持通配符（如"https://example.com/api/*"）。

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