如何安全地将YouTube视频嵌入Chrome扩展程序而不违反内容安全政策?

时间:2017-06-07 18:16:51

标签: google-chrome google-chrome-extension youtube youtube-iframe-api

我一直在寻找这个问题的答案一段时间,但无法获得任何提供的解决方案。

这是我尝试嵌入的YouTube代码: http://jsfiddle.net/BFDKS/1204/

视频iframe已添加到index.html和app.js中我调用:

    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('ytplayer', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady() {
        player.playVideo();
        // Mute!
        player.mute();
    }

问题是我在控制台中收到CSR错误 enter image description here

这导致我进入manifest.json文件:

{
"name": "",
"manifest_version": 2,
"version": "0.0.6",
"icons": {
  "16": "icon-16.png",
  "48": "icon-48.png",
  "128": "icon-128.png"
},
"content_security_policy": "script-src 'self' https://www.google-analytics.com/; https://www.youtube.com/*; object-src 'self'",
"permissions": [
    "activeTab",
    "*://*.google-analytics.com/*"
],
"chrome_url_overrides": {
    "newtab": "index.html"
},
"description": ""

}

这基本上是我现在所处的位置,并且无法取得进展。我真的只是试图嵌入一个自动播放的YouTube视频,默认情况下静音,并打开隐藏字幕。有任何想法吗?非常感激!

1 个答案:

答案 0 :(得分:3)

我明白了,manifest.json文件需要以下内容:

    "content_security_policy": "script-src 'self' https://www.google-analytics.com/ https://www.youtube.com/ https://s.ytimg.com; object-src 'self'; child-src https://www.youtube.com/ https://s.ytimg.com",

感谢wOxxOm的指导