1

I'm a newbie using YouTube API player.

I'm building a chrome extension to work with YouTube's API. In order to use the player, I have created a method in which I make this:

popup.js :

   jQuery(document).ready(function()

    {    

   Player();
    });

 // Creating the player
 function Player(){
   var tag = document.createElement('script');
   tag.src = "//www.youtube.com/iframe_api";
   var firstScriptTag = document.getElementsByTagName('script')[0];
   firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);  
 }


 function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '1',
      width: '1',
      playerVars: {
                showinfo: '0',        
                controls: '0',
                autohide: '1',
                enablejsapi:'1',
                origin:"http://localhost/myapp"
        },
         events: {
        'onReady': IframeReady,
        'onStateChange': StateChange
        }
         });    
      }


      function IframeReady(event) {

player.addEventListener("onStateChange", "StateChange");
player.addEventListener("onError", "PlayerError");
player.setPlaybackQuality('hd720');
gettingInfo();
              }


 I get the music information (playlits) by using a search function, something like this:


    httpReq.open("GET","https://gdata.youtube.com/feeds/api/videos/-/Music/?v=2&alt=json&orderby="+"relevance"+"&start-index="+"1"+"&max-results="+"10"+"&q="+query);

Aforementioned function works perfect! I got the entire playlist. The problem is when I try to play the video action (playlist), the player seems does not work.

By using Inspect function from chrome extension I got this warning:

Failed to load resource chrome-extension://www.youtube.com/iframe_api

I have tried to fix this problem doing the following things:

  1. By putting on manifest file this:

      "content_security_policy": 
       "script-src 'self' 'unsafe-eval'; https://www.youtube.com/player_api https://s.ytimg.com/yts/jsbin/www-widgetapi-vfljlXsRD.js; object-src 'self'"
    
  2. By putting on popup.html this:

        <script type="text/javascript" src="//www.youtube.com/iframe_api"></script>
    

Can anyone tell me please How can I resolve this problem.

Thank you very much.

user1069571
  • 17
  • 3
  • 8
  • Use `https://www.youtube.com/iframe_api`. instead of `//www.youtube.com/iframe_api`. – Rob W Jun 08 '13 at 16:39
  • Hi Rob Thanks for the tip. Now I have the following mistake: "Refused to load the script 'https://www.youtube.com/iframe_api' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:" could you tell me plase, how can I resolve it? – user1069571 Jun 09 '13 at 11:57
  • I have modified the content security policy on manifest.json, by putting this: "content_security_policy": "script-src 'self' https://www.youtube.com/player_api; object-src 'self'" PD: includes "https" before youtube.com but it does not seem to work for me – user1069571 Jun 09 '13 at 12:32
  • I was pointing to your popup.html file. I believe that your code also has a proble, because `origin` is set to a localhost URL, while it should have been `location.origin`. – Rob W Jun 09 '13 at 12:38
  • @Rob I think that my problem is only related to chrome extension Inline JavaScript restrictions. This: [link](http://www.youtube.com/iframe_api) returns a JavaScript file that include: [link](http://s.ytimg.com/yts/jsbin/www-widgetapi-vfljlXsRD.js) and google chrome always disallow inline JavaScript code. I have tested on a normal web app (html+javascript)and it works perfect. Could you tell me how I can resolve the inline problem associated to [link](http://www.youtube.com/iframe_api) on chrome extension? thank you very much – user1069571 Jun 09 '13 at 16:23
  • Do you think if is it possible to include directly code from [link](http://www.youtube.com/iframe_api) and [link](http://s.ytimg.com/yts/jsbin/www-widgetapi-vfljlXsRD.js) on popup.js? in order to avoid the inline javascript code? By the way, Do you have some maybe examples related to youtube api player inside chrome extension? thanks – user1069571 Jun 09 '13 at 16:29
  • Edit the question to include what you've tried, including the errors. Here is an example I've written some time ago: http://stackoverflow.com/a/9379277/938089. – Rob W Jun 09 '13 at 17:09
  • 1
    @Rob we have Combine them ("http://www.youtube.com/iframe_api and "http://s.ytimg.com/yts/jsbin/www-widgetapi-vfljlXsRD.js) into one script-> "http://pastebin.com/TM1bbsje and we have include it into our content scripts.But just now we have the following mistake Blocked a frame with origin "http://www.youtube.com" from accessing a frame with origin "chrome-extension://ssxxxxxx". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "chrome-extension". Protocols must match. see the line number 672 of aforementioned file(pastebin). – user1069571 Jun 19 '13 at 16:07
  • Manifest file is "http://pastebin.com/Za8Ja95p – user1069571 Jun 19 '13 at 16:07

0 Answers0