Chrome扩展中addEventListener内fetch请求服务器数据报错解决方案

你遇到的Failed to fetch错误核心原因是Chrome扩展的权限限制与跨域规则：Content Script运行在网页上下文，直接发起跨域请求需要在manifest.json中配置对应权限，同时请求URL必须使用完整服务器地址，不能用相对路径。以下是具体解决方法：

一、核心配置：manifest.json 添加权限 #

无论采用哪种方案，都需要在扩展配置文件中声明目标服务器的访问权限。以Chrome扩展V3为例：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你需要注入的网页域名，比如"https://*.example.com/*"
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["activeTab"],
  "host_permissions": [
    "https://你的服务器域名/*" // 替换为实际API地址，比如"https://api.yourserver.com/*"
  ]
}

如果是V2版本，直接把host_permissions的内容合并到permissions数组即可。

二、方案1：直接在Content Script中发起请求 #

修改content.js，补全完整API地址并添加错误捕获：

document.addEventListener("click", (event) => {
  if (event.target.innerText === "Reply") {
    console.log("reply clicked");
    function request(email) {
      const _data = { prompt: email };
      // 替换为你的完整API接口地址
      fetch("https://你的服务器域名/具体接口路径", {
        method: "POST",
        body: JSON.stringify(_data),
        headers: { "Content-type": "application/json; charset=UTF-8" }
      })
      .then(response => {
        if (!response.ok) throw new Error(`HTTP错误：${response.status}`);
        return response.json();
      })
      .then(json => console.log(json['response']))
      .catch(err => console.error("请求失败：", err)); // 捕获未处理的Promise错误
    }
    request('this is a test message to check the API');
  }
});

三、方案2：通过Background Service Worker代理请求（更推荐） #

Content Script的请求可能受网页CSP规则限制，用Background代理更稳定安全：

1. 修改content.js，点击时向Background发送消息：

document.addEventListener("click", (event) => {
  if (event.target.innerText === "Reply") {
    console.log("reply clicked");
    chrome.runtime.sendMessage({
      type: "fetch_data",
      prompt: "this is a test message to check the API"
    }, (response) => {
      if (chrome.runtime.lastError) {
        console.error("消息发送失败：", chrome.runtime.lastError);
        return;
      }
      console.log("API返回结果：", response.data);
    });
  }
});

2. 修改background.js，接收消息并发起请求：

console.log("background.js loaded");
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "fetch_data") {
    const _data = { prompt: request.prompt };
    // 替换为你的完整API接口地址
    fetch("https://你的服务器域名/具体接口路径", {
      method: "POST",
      body: JSON.stringify(_data),
      headers: { "Content-type": "application/json; charset=UTF-8" }
    })
    .then(response => {
      if (!response.ok) throw new Error(`HTTP错误：${response.status}`);
      return response.json();
    })
    .then(json => sendResponse({ data: json['response'] }))
    .catch(err => {
      console.error("请求失败：", err);
      sendResponse({ error: err.message });
    });
    return true; // 告知Chrome需要异步返回结果
  }
});

关键注意事项 #

• 必须使用完整的API URL：Content Script的相对路径基于当前网页域名，而非你的服务器，不能直接写fetch_address。
• 权限配置要精准：host_permissions必须包含目标服务器域名，通配符*需正确使用，比如https://api.yourserver.com/*允许该域名下所有路径的请求。
• 强制捕获Promise错误：一定要添加.catch()处理，否则未处理的Promise错误会触发你看到的Uncaught (in promise)报错。

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