Chrome扩展监听请求体解析FormData返回undefined问题排查

核心问题：错误使用FormData处理details.requestBody.formData #

Chrome扩展的webRequest API返回的details.requestBody.formData本身就是一个键值对对象，每个键对应的值是数组（支持表单多值字段，比如复选框）。而FormData构造函数仅支持传入HTML表单元素或另一个FormData实例，直接传入普通对象不会生成有效的FormData实例，导致你调用form.get()时返回undefined。

修复步骤 #

1. 直接访问formData对象的属性：不需要包装成FormData，直接从details.requestBody.formData中取值，注意取数组的第一个元素（单输入框场景下数组仅含一个值）。
2. 校验字段名大小写：确保代码中的字段名（firstName、LastName）和目标表单中输入框的name属性完全一致（表单字段名区分大小写）。

修改后的background.js代码 #

chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    if (details.url.includes("https://www.example.com/register/")) {
      // 直接使用formData对象，无需FormData包装
      const formData = details.requestBody.formData;
      // 取数组第一个元素，适配单值输入框
      const userFirstName = formData?.firstName?.[0];
      const userLastName = formData?.LastName?.[0];
      console.log(`First name: ${userFirstName}, Last name: ${userLastName}`);
    }
  },
  { urls: ["<all_urls>"], types: ["main_frame"] },
  ["requestBody"]
);

额外注意事项 #

• 确认表单提交的Content-Type为application/x-www-form-urlencoded：如果是multipart/form-data类型，formData属性不会被自动解析，需要手动处理details.requestBody.raw中的原始数据。
• 增加可选链(?.)避免报错：如果请求中没有对应字段，可选链会返回undefined而不是抛出错误。

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