CODEWITHSUNDEEP
javascriptjqueryapigoogle-chromeyoutube
SaiKiran
SaiKiran

Reputation: 6504

Error in loading a youtube video in the popup file in chrome extenstion?

Iam developing a chrome extension which allows users to play YouTube videos in the extension. Here iam following the API guide from the You tube. Here the manifest.js file here

{
  "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"
  }
}

Here the popup.html code is here

<!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>

When running the same code in the normal webpage it is working perfectly but when the same code was bundled in the form of extension ,this fails.Cant figure what the problem is?

Error here: enter image description here

Upvotes: 0

Views: 286

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

Your issue is the Content Security Policy. For more details see Content Security Policy Level 2.

In your manifest it is required:

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

to enable the youtube video inside your popup.html.

In general, CSP works as a black/whitelisting mechanism for resources loaded or executed by your extensions. Defining a reasonable policy for your extension enables you to carefully consider the resources that your extension requires, and to ask the browser to ensure that those are the only resources your extension has access to. These policies provide security over and above the host permissions your extension requests; they're an additional layer of protection, not a replacement.

The fixed version of your extension:

// 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();
}

Upvotes: 1

Related Questions