当前Firefox扩展能否修改POST请求数据？有无新实现方案？

Firefox目前仍不支持通过webRequest.onBeforeRequest直接修改POST请求体——requestDetails对象是只读副本，修改它不会影响实际发送的请求，这一限制尚未完全解决。不过针对短请求体，有两种可行的替代方案：

方案一：后台拦截并重新发送请求（适用于AJAX类POST请求） #

原理：拦截目标POST请求后取消原请求，构造包含修改后请求体的新请求，通过fetch发送并处理响应。

修改后的代码 #

manifest.json

保持原权限配置不变：

{
  "description": "Demonstrating webRequests",
  "manifest_version": 2,
  "name": "webRequest-demo",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking", "*://localhost/*"],
  "background": {
    "scripts": ["background.js"]
  }
}

background.js

async function handleRequest(requestDetails) {
  if (requestDetails.method !== "POST" || !requestDetails.requestBody?.formData) {
    return;
  }

  // 取消原请求
  const response = { cancel: true };

  // 构造修改后的表单数据
  const formData = new FormData();
  // 复制原表单数据
  for (const [key, values] of Object.entries(requestDetails.requestBody.formData)) {
    values.forEach(val => formData.append(key, val));
  }
  // 修改目标字段
  formData.set("textarea1", "hello world");

  // 构造请求参数
  const requestOptions = {
    method: requestDetails.method,
    headers: new Headers(requestDetails.requestHeaders),
    body: formData,
    credentials: "include",
    redirect: "follow"
  };

  // 发送修改后的请求并处理响应
  try {
    const res = await fetch(requestDetails.url, requestOptions);
    const tabId = requestDetails.tabId;
    if (tabId !== -1) {
      const responseText = await res.text();
      browser.tabs.sendMessage(tabId, { type: "MODIFIED_RESPONSE", data: responseText });
    }
  } catch (err) {
    console.error("重发请求失败:", err);
  }

  return response;
}

browser.webRequest.onBeforeRequest.addListener(
  handleRequest,
  { urls: ["*://localhost/*"] },
  ["blocking", "requestBody", "requestHeaders"]
);

方案二：内容脚本拦截表单提交（适用于页面表单POST请求） #

原理：向目标页面注入内容脚本，拦截表单submit事件，修改表单数据后再提交，避免原请求被取消导致的页面跳转异常。

修改后的代码 #

manifest.json

新增内容脚本配置：

{
  "description": "Demonstrating webRequests",
  "manifest_version": 2,
  "name": "webRequest-demo",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking", "*://localhost/*"],
  "background": {
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["*://localhost/*"],
      "js": ["content.js"]
    }
  ]
}

content.js

document.addEventListener("submit", (e) => {
  const form = e.target;
  if (form.method.toLowerCase() === "post" && form.action.includes("test.php")) {
    // 修改目标字段值
    const textarea = form.querySelector("#textarea1");
    if (textarea) textarea.value = "hello world";
    // 表单将自动提交修改后的数据
  }
});

原代码失效原因 #

1. 只读对象限制：requestDetails是API传递的只读副本，修改它不会影响实际发送的请求；
2. Firefox API限制：Firefox的webRequest API至今不支持通过返回修改后的requestDetails更改请求体，这是长期存在的功能限制。

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