'Is it possible to use the iFrame player API in a Google Chrome Extension?

I am making a Chrome Extension in which I need to display some videos from YouTube.

The Chrome Extension works as follows. The action button starts a timer. When the timer completes, a new tab appears showing a random video from a list of YouTube videos.

To have control over these videos, and to be able to use the video player controls, I need to include the iFrame player API, but after trying several options I keep getting the same error:

Refused to load the script 'https://www.youtube.com/iframe_api' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

The relevant code is as follows:

event.js:

function openNCprojectVideo() {
    chrome.tabs.create({url: "ncproject.html"});
}

This code activates when the timer ends.

ncproject.html:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>NC Project Video</title>

    <link rel="stylesheet" href="assets/templates/css/ncproject.css">
  </head>
  <body class="bg-gradient">

    <!-- VIDEO PLAYER -->
    <div id="player"></div>

      <script src="assets/templates/js/ncproject.js"></script>
  </body>
</html>

ncproject.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('player', {
      height: '390',
      width: '640',
      videoId: 'FfwtA2nS2ik',
      playerVars: {
        'playsinline': 1
      },
      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();
  }

Manifest:

{
    "name": "NC Project",
    "description": "A chair yoga google chrome extension for everyone",
    "version": "1.0",
    "manifest_version": 3,
    "background": {
        "service_worker": "event.js"
    },
    "action": {
        "default_title": "NC Project",
        "default_icon": "images/icon32.png"
    },
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "permissions": [
        "alarms",
        "idle",
        "notifications",
        "tabs",
        "storage"
    ],
    "host_permissions": [
        "<all_urls>"
    ],
    "options_ui": {
        "page": "options.html",
        "open_in_tab": true
    }
}

I have reviewed several posts related to this same issue, but in none of them I have found a satisfactory solution. Thanks in advance for your help.

google-chrome-extension youtube-iframe-api

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Is it possible to use the iFrame player API in a Google Chrome Extension?

Sources

Related Questions