在 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 字段（关键！）
仅靠 <meta> 标签无法覆盖扩展级 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>"]
}]
}?
extension_pages控制 popup/options 等 HTML 页面的 CSP；service_worker字段不可用于放宽脚本加载限制（V3 禁止远程脚本注入 service worker）。
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);
}
}⚠️ 注意：此方式要求
manifest.json中已声明https://tp.media在host_permissions，且脚本内容无eval()或内联事件（否则仍可能被拦截）。
? 重要提醒：
- 不要使用
'unsafe-inline'或'unsafe-eval'—— Chrome 应用商店审核将拒绝； -
https://tp.media必须出现在host_permissions中，否则网络请求会被阻止； - 查询参数中的特殊字符（如
%23）无需额外编码，CSP 匹配只看 origin； - 测试时务必彻底重载扩展（
chrome://extensions → 开启开发者模式 → 重新加载），缓存可能导致策略未生效。
综上，核心是双管齐下：manifest.json 中声明 extension_pages CSP，并确保 host 权限完备。这是构建类似 JetRadar 这类嵌入式营销组件的合规基础。
