Chrome扩展调用YouTube iframe API时CSP配置错误如何解决？

• CSP语法错误：script-src 配置项只能指定允许的脚本源（域名/协议+域名），不能写完整的脚本文件路径，你填写的https://www.youtube.com/iframe_api是具体文件路径，不符合CSP规则。
• Manifest版本适配错误：Chrome扩展的Manifest V2和V3版本的CSP配置格式完全不同，格式写错就会直接提示CSP值无效。

Manifest V2版本扩展 #

直接修改CSP配置为以下内容即可：

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

Manifest V3版本扩展 #

V3版本默认禁止在扩展核心页面加载外部远程脚本，需要使用沙盒页加载播放器相关逻辑，配置如下：

1. 修改manifest.json配置

"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self'",
  "sandbox": "script-src 'self' https://www.youtube.com 'unsafe-eval'; object-src 'self'"
},
"sandbox": {
  "pages": ["player.html"]
}

2. 将原有的播放器加载、控制逻辑全部放到沙盒页player.html中，沙盒页和扩展其他页面通过postMessage通信传递控制指令即可。

你可以直接通过iframe的postMessage接口控制播放器，不需要加载YouTube的官方iframe_api脚本，完全规避CSP问题：

1. 嵌入带API参数的YouTube播放器iframe

<iframe id="yt-player" width="640" height="360" src="https://www.youtube.com/embed/替换为你的视频ID?enablejsapi=1" frameborder="0"></iframe>

2. 直接发消息控制播放/暂停

// 播放
document.querySelector('#yt-player').contentWindow.postMessage(
  JSON.stringify({event:"command",func:"playVideo",args:""}),
  "*"
)
// 暂停
document.querySelector('#yt-player').contentWindow.postMessage(
  JSON.stringify({event:"command",func:"pauseVideo",args:""}),
  "*"
)

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