Chrome Extensions 中解决外部脚本 CSP 报错的完整方案-js教程-PHP中文网

Chrome Extensions 中解决外部脚本 CSP 报错的完整方案

在 Chrome 扩展中直接引入第三方远程脚本（如 https://tp.media/content?...）会因默认严格的 Content Security Policy（CSP）被拦截；需正确配置 script-src 指令显式允许可信域名，同时注意 Manifest V3 的限制与替代方案。

在 chrome 扩展中直接引入第三方远程脚本（如 `https://tp.media/content?...`）会因默认严格的 content security policy（csp）被拦截；需正确配置 `script-src` 指令显式允许可信域名，同时注意 manifest v3 的限制与替代方案。

Chrome 扩展默认启用极严格的 Content Security Policy（CSP），尤其在 Manifest V3 中，script-src 'self' 是硬性默认策略——这意味着任何通过 <script src="..."></script> 动态加载的外部脚本（包括带查询参数的 URL）均被禁止执行，即使域名看似可信。

你遇到的报错：

Refused to load the script 'https://tp.media/content?...' 
because it violates the following Content Security Policy directive: "script-src 'self'"

正是该策略生效的明确提示。

✅ 正确解决方案（分场景）：

1. 若使用 HTML 页面（如 popup.html / options.html）且需内联或远程脚本
在页面中添加 meta 标签（⚠️ 仅对页面级 CSP 有效，且不适用于 Manifest V3 的 service worker 脚本）：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://tp.media; object-src 'none';">

✅ 允许从 https://tp.media 加载脚本（协议、域名、端口必须完全匹配；路径和查询参数无需指定）
❌ 不支持通配符 https://*.tp.media 或 https://tp.media/*；子路径/参数不影响匹配

2. Manifest V3 必须配置 content_security_policy 字段（关键！）
仅靠标签无法覆盖扩展级 CSP。你必须在 manifest.json 中显式声明：

{
  "manifest_version": 3,
  "name": "My Flight Finder",
  "version": "1.0",
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://tp.media; object-src 'none';"
  },
  "web_accessible_resources": [{
    "resources": ["*.js", "*.css"],
    "matches": ["<all_urls>"]
  }]
}</all_urls>

? extension_pages 控制 popup/options 等 HTML 页面的 CSP；service_worker 字段不可用于放宽脚本加载限制（V3 禁止远程脚本注入 service worker）。

Chrome Relay
通过 OpenClaw Browser Relay 扩展控制用户本地 Chrome 浏览器。使用时机：(1) 用户要求控制/访问其浏览器 (2) 用户需要自动化...

下载

3. 替代方案：避免直接 <script src></script>（更安全、更兼容）
由于 CSP 对动态脚本限制严格，推荐改用 fetch() + eval()（⚠️ 需额外许可）或注入 DOM 方式（推荐）：

// 在 content script 或 popup 中安全加载
async function loadTpMediaScript() {
  try {
    const url = "https://tp.media/content?currency=usd&trs=291038&...";
    const response = await fetch(url);
    const scriptText = await response.text();

    // 创建 script 标签并插入 body（绕过 CSP 的 'unsafe-eval' 限制）
    const script = document.createElement('script');
    script.textContent = scriptText;
    document.body.appendChild(script);
  } catch (err) {
    console.error("Failed to load tp.media script:", err);
  }
}