Chrome扩展后台脚本Fetch请求无响应问题排查求助

我正在开发一款Chrome扩展，功能是提取本地存储的数据并通过POST请求发送到远程数据库表。目前用postb.in测试POST功能，通过自定义DevTools面板触发操作。调试时发现代码执行到background.js第37行时卡住，Fetch请求没有响应。

Panel.js代码 #

const toDbBtn = document.getElementById("toDbBtn");

toDbBtn.addEventListener("click", async () => {
  const dbName = document.getElementById("textBox").value;

  try {
    const result = await chrome.storage.local.get(["yourKey"]);

    if (result.yourKey) {
      const savedArray = JSON.parse(result.yourKey);
      console.log(result.yourKey);
      console.log("Saved Array:", savedArray);
      console.log("DB Name:", dbName);
      console.log("Type of result.yourKey:", typeof result.yourKey);
      console.log("Type of savedArray:", typeof savedArray);
      console.log("Is savedArray an array?", Array.isArray(savedArray));

      // 向后台脚本发送消息
      const response = await chrome.runtime.sendMessage({
        action: "sendToDB",
        data: { dbName: dbName, savedArray: result.yourKey },
      });

      if (response.error) {
        console.error("Error:", response.error);
      } else {
        console.log("Success:", response.result);
      }
    } else {
      console.log("本地存储中没有可发送的数据。");
    }
  } catch (error) {
    console.error("存储读取或消息发送过程出错:", error);
  }
});

background.js代码 #

chrome.runtime.onConnect.addListener(port => {});

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.action === "sendToDB") {
    const { dbName, savedArray } = request.data;

    if (typeof dbName !== 'string' || typeof savedArray !== 'string') {
      sendResponse({ error: '数据类型无效' });
      return false;
    }

    let parsedArray;
    try {
      parsedArray = JSON.parse(savedArray);
    } catch (e) {
      sendResponse({ error: 'savedArray不是有效的JSON字符串' });
      return false;
    }

    const data = {
      dbName: dbName,
      savedArray: parsedArray,
    };

    const postable = JSON.stringify(data);
    console.log("postable", postable);

    try {
      const response = await fetch("https://www.postb.in/1743970496740-3388752799946", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: postable,
      });

      const result = await response.json();
      console.log("服务器响应:", result);
      sendResponse({ result: result });
    } catch (error) {
      sendResponse({ error: error.message });
    }

    return true; // 异步响应需要返回true
  }
  return false; // 非当前监听的消息返回false
});

manifest.json配置 #

{
  "manifest_version": 3,
  "name": "myDevTools",
  "version": "1.0",
  "description": "扩展描述",
  "devtools_page": "devtools.html",

  "host_permissions": [
    "*://*.cnn.com/",
    "https://www.postb.in/*"
  ],
  "permissions": [
    "storage",
    "activeTab",
    "scripting",
    "webNavigation",
    "tabs",
    "unlimitedStorage",
    "cookies",
    "alarms",
    "notifications",
    "contextMenus",
    "offscreen",
    "identity",
    "identity.email",
    "nativeMessaging",
    "browsingData"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

编辑补充：修改后的POST请求头 #

const response = await fetch("https://www.postb.in/1743979363812-2128863274119", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "POST",
      "Access-Control-Allow-Headers": "Content-Type"
    },
    body: postable,
  });

相关截图 #

问题排查与解决建议 #

1. 错误添加CORS响应头：你在请求里添加的Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers是服务器返回给浏览器的响应头，不是前端请求应该携带的字段。添加这些头会导致请求异常，直接删除这三个CORS相关请求头，只保留Content-Type: application/json即可。

2. 检查postb.in链接有效性：postb.in的临时测试链接有有效期，确认你使用的链接是否已过期，建议重新生成一个新的测试链接替换现有地址。

3. Service Worker调试：Chrome扩展的Service Worker（background.js）需在扩展管理页面的「Service Worker」入口打开调试面板，查看是否有网络请求失败的具体报错（如404、超时、跨域异常等）。

4. 完善响应状态检查：在fetch请求后增加响应状态判断，捕获4xx/5xx的错误状态，避免无响应情况：

   if (!response.ok) {
     throw new Error(`HTTP请求失败！状态码: ${response.status}`);
   }
   

5. 重新加载扩展：虽然manifest.json中已配置https://www.postb.in/*的主机权限，仍建议重新加载扩展确保权限生效。

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