首次开发Chrome扩展：遇fetch报错及CSP限制问题求助

• 报错信息：Uncaught (in promise) TypeError: Failed to fetch
• 上下文：popup.html
• 堆栈追踪：popup.js:10 (anonymous function)
• 触发代码行：const response = await fetch('http://localhost:5000/process', {

相关代码实现：

document.getElementById('keyword-form').addEventListener('submit', async (event) => {
  event.preventDefault();
  const keyword = document.getElementById('keyword').value;

  // 定义子Reddit名称、起止日期
  const subredditNames = ['AskReddit', 'worldnews', 'gaming'];
  const startDate = '2023-04-01';
  const endDate = '2023-04-30';

  const response = await fetch('http://localhost:5000/process', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      keyword,
      subreddit_names: subredditNames,
      start_date: startDate,
      end_date: endDate
    })
  });

  const result = await response.json();

  // 更新页面结果展示
  document.getElementById('result').innerHTML = JSON.stringify(result);
});

补充背景：首次开发Chrome扩展，熟悉Python，此前尝试引入gstatic和chart.js时曾遭遇content_security_policy相关问题。

1. 跨域请求限制（CORS）处理 #

Chrome扩展的Popup处于独立的浏览器隔离环境，直接请求localhost后端会触发跨域拦截，这是Failed to fetch的核心原因之一。

• 扩展权限配置：在manifest.json中添加目标域名的访问权限：

  "permissions": [
    "http://localhost:5000/*"
  ]
  

• 后端CORS配置：确保Python后端允许扩展来源的请求。以Flask为例，使用flask-cors库配置：

  from flask import Flask
  from flask_cors import CORS
  
  app = Flask(__name__)
  # 替换成你的扩展ID，格式为chrome-extension://xxxxxx/
  CORS(app, origins="chrome-extension://<你的扩展唯一ID>")
  

2. 内容安全策略（CSP）调整 #

此前遇到的第三方资源加载问题，以及本次fetch请求都受CSP规则约束，需在manifest.json中针对性配置：

• 如果使用Manifest V3，配置示例：

  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none'; connect-src http://localhost:5000;",
    "sandbox": "sandbox allow-scripts allow-forms; script-src 'self' https://cdn.jsdelivr.net;"
  }
  

  • connect-src明确允许向localhost后端发起请求
  • 若需引入chart.js等第三方库，可在script-src添加对应CDN地址（避免使用unsafe-inline，除非必要）

3. 调试技巧 #

• 打开Popup开发者工具：右键点击Popup界面，选择「检查」，在Network面板查看请求的具体错误细节（比如OPTIONS预检请求是否失败、后端是否未响应）
• 先直接在浏览器访问http://localhost:5000/process，确认后端服务正常运行且接口可用

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