Manifest V3版Chrome扩展弹窗嵌入YouTube Iframe播放器报错如何解决

算力阿峰

2026-9-25

解决方案

1. 修正manifest.json配置

你之前配置的沙箱CSP没有显式声明允许加载YouTube相关的脚本和框架资源，需要补充对应规则，Manifest V3的配置示例如下：

{
  "manifest_version": 3,
  // 其他基础配置省略
  "content_security_policy": {
    "sandbox": "sandbox allow-scripts; script-src 'self' https://www.youtube.com https://youtube.googleapis.com; frame-src https://www.youtube.com;"
  },
  "sandbox": {
    "pages": [
      "/videoPlayer.html"
    ]
  }
}

2. 沙盒页面逻辑调整

两种实现方案二选一即可：

方案A：直接使用嵌入iframe（无需加载外部JS，更简单）

不用调用YouTube iframe API，直接在videoPlayer.html写入嵌入框架：

<!DOCTYPE html>
<html>
<body style="margin:0;padding:0;">
  <iframe 
    width="100%" 
    height="315" 
    src="https://www.youtube.com/embed/你的视频ID" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
  </iframe>
</body>
</html>

方案B：使用YouTube iframe API

如果需要自定义控制播放器逻辑，按正常流程在videoPlayer.html引入API即可：

<!DOCTYPE html>
<html>
<body>
  <div id="player"></div>
  <script>
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '315',
        width: '100%',
        videoId: '你的视频ID',
      });
    }
  </script>
</body>
</html>

3. Popup页面引入沙盒

在popup.html中用iframe嵌入沙盒页面：

<!DOCTYPE html>
<html>
<body style="width:400px;">
  <iframe src="/videoPlayer.html" frameborder="0" width="100%" height="315"></iframe>
</body>
</html>