Question

我开发了一个Chrome扩展程序，允许用户在扩展程序中播放YouTube视频。在这里，我遵循You管的API指南。这里的manifest.js文件在这里

{
  "manifest_version": 2,
  "name": "Youtube Chrome Extenstion",
  "description":"Extenstion which allows users to use youtube from the chrome extenstion and also enables a search feature in the app",
  "version": "1.0",

  "browser_action":{
    "default_icon" : "icon.png",
    "default_popup" : "popup.html"
  }
}

这里的popup.html代码在这里

<!DOCTYPE html>
<html>
    <body>
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <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: '390',
                    width: '640',
                    videoId: 'M7lc1UVf-VE',
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }

            function onPlayerReady(event) {
                event.target.playVideo();
            }

            var done = false;
            function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING && !done) {
                    setTimeout(stopVideo, 6000);
                    done = true;
                }
            }
            function stopVideo() {
                player.stopVideo();
            }
        </script>
    </body>
</html>

当在普通网页中运行相同的代码时，它运行得很好但是当相同的代码以扩展的形式捆绑时，这会失败。可以解决问题是什么？

错误：

Answer 1

您的问题是Content Security Policy。有关详细信息，请参阅Content Security Policy Level 2。

在你的清单中，它是必需的：

"content_security_policy": "script-src https://s.ytimg.com https://*.youtube.com; object-src 'self'"

在popup.html中启用youtube视频。

通常，CSP用作扩展程序加载或执行的资源的黑/白名单机制。为扩展程序定义合理的策略使您可以仔细考虑扩展程序所需的资源，并要求浏览器确保这些资源是您的扩展程序可以访问的唯一资源。这些策略提供超出您的扩展请求的主机权限的安全性;它们是一个额外的保护层，而不是替代品。

您的扩展程序的固定版本：

// The manifest

{
  "manifest_version": 2,
  "name": "Youtube Chrome Extenstion",
  "description":"Extenstion which allows users to use youtube from the chrome extenstion and also enables a search feature in the app",
  "version": "1.0",

  "browser_action":{
    "default_icon" : "icon.png",
    "default_popup" : "popup.html"
  },
  "content_security_policy": "script-src https://s.ytimg.com https://*.youtube.com; object-src 'self'"
}


// popup.html

<!DOCTYPE html>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="popup.js"></script>
</body>
</html>

// popup.js

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}

在chrome扩展程序中在弹出文件中加载YouTube视频时出错？

1 个答案: