Chrome扩展Manifest V3的content_security_policy配置报错，求合规实现方案

核心问题 #

你之前的配置错误在于在Manifest V3的extension_pages CSP中给script-src添加了外部域名，这是被严格禁止的。Manifest V3对扩展页面的CSP限制更严格，脚本只能来自扩展自身（'self'）或Chrome内置资源，外部域名不能作为脚本源。

正确的Manifest配置 #

{
  "manifest_version": 3,
  "name": "AdBlocker Upsia",
  "version": "1.0",
  "host_permissions": ["https://api.example.com/*"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

关键配置说明 #

1. host_permissions：必须添加https://api.example.com/*，用于授权扩展访问该API域名，这是发起跨域请求的前提。
2. extension_pages的CSP：保持默认的script-src 'self'; object-src 'self'即可，不需要添加任何外部脚本源——外部API调用不依赖这里的配置。
3. 后台Service Worker：所有外部API请求都通过后台service worker发起，避免在扩展页面直接调用，这是Manifest V3推荐的安全做法。

实现外部API调用的步骤 #

1. 后台Service Worker逻辑（background.js）

async function fetchAPI() {
  try {
    const response = await fetch('https://api.example.com/your-endpoint');
    if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
    return await response.json();
  } catch (err) {
    console.error('API请求失败:', err);
    return null;
  }
}

// 监听来自扩展页面的消息，提供API调用能力
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'callAPI') {
    fetchAPI().then(data => sendResponse(data));
    return true; // 保持消息通道开放，等待异步请求完成
  }
});

2. 扩展页面（如popup.js）调用API

// 假设弹出页有一个触发按钮
document.querySelector('#call-api-btn').addEventListener('click', async () => {
  const apiData = await chrome.runtime.sendMessage({ type: 'callAPI' });
  if (apiData) {
    // 处理并展示API返回的数据
    console.log('API返回结果:', apiData);
  }
});

你之前尝试的错误分析 #

• 第一次/第三次尝试：在extension_pages的script-src中加入https://api.example.com，违反Manifest V3的CSP规则，直接触发验证错误。
• 第二次尝试：使用了Manifest V2的字符串形式CSP语法，Manifest V3要求必须使用对象结构的CSP配置，因此报错提示旧语法不支持。

额外注意事项 #

• 如果需要加载外部样式、图片等非脚本资源，可以在extension_pages的CSP中添加对应源，例如：

  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; style-src 'self' https://cdn.example.com; img-src 'self' https://cdn.example.com"
  }
  

• 禁止在script-src中添加任何外部域名，这是Manifest V3的强制安全要求，没有例外（除非使用沙箱页面，但沙箱会隔离页面与扩展的通信，仅适用于特殊场景）。

内容的提问来源于stack exchange，提问作者Windows Metafile LOL