Chrome扩展嵌入TikTok视频遇CSP错误，求解决方案

问题分析 #

你在Chrome扩展页面中使用TikTok官方嵌入代码时，遇到Content Security Policy（CSP）限制，导致https://www.tiktok.com/embed.js脚本无法加载。之前添加的CSP配置未生效，核心原因是Manifest版本（V2/V3）的配置格式不匹配，或缺少必要的资源权限。

解决方案 #

根据你使用的Chrome扩展Manifest版本，选择对应的CSP配置：

1. 若使用Manifest V2 #

在manifest.json中更新content_security_policy字段，同时允许TikTok的脚本加载和iframe资源：

"content_security_policy": "script-src 'self' https://www.tiktok.com; frame-src https://www.tiktok.com; object-src 'self'"

2. 若使用Manifest V3 #

Manifest V3对CSP配置结构做了调整，需用对象形式分别配置extension_pages（扩展自身页面）的权限：

"content_security_policy": {
  "extension_pages": "script-src 'self'; script-src-elem 'self' https://www.tiktok.com; frame-src https://www.tiktok.com; object-src 'self'",
  "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src *;"
}

额外说明 #

• TikTok嵌入脚本会动态加载iframe展示视频，因此必须添加frame-src https://www.tiktok.com以允许iframe资源加载。
• 若后续出现媒体、图片等资源加载错误，可在CSP中补充对应规则，例如img-src https://*.tiktokcdn.com; media-src https://*.tiktokcdn.com。
• 修改Manifest后，需在Chrome扩展管理页面点击刷新按钮重新加载扩展，配置才会生效。

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