Content Security Policy directive prevents loading of Youtube iframe API

[Tim Steiner]

I have built a chrome extension which includes an Angular User Interface in a new tab started from the extensions context menu.

chrome.action.onClicked.addListener(async function () {
   let ANGULAR_HTML_URL = "/dist/index.html";
   chrome.tabs.create(
     {url: chrome.runtime.getURL(ANGULAR_HTML_URL)});}});

This works already very well.

Now, I want to extend it to include an embedded youtube video. When launching the Angular page standalone (not as an extension) this work properly too. But this requires that the youtube iframe api (https://www.youtube.com/iframe_api) is loaded. I tried several ways:

• adding a static script tag to the index.html
  => Fails with Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' 
• Loading dynamically by. creating a script tag. Which would likely lead to a violation anyway
  => Fails with Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem'
• Changing the Content Security Policy in the Manifest 3
  => Prevents extension from being loaded as this is not an allowed change
  
• Adding the url to the host permission
  => Does not change any of the behaviors above
  

So my question: What can I do to load this external script into my extension? Or is this simply not possible because extensions are so much restricted in the meanwhile that even valid usages of external scripts is not possible anymore. Even not if they origin from a Google service?

[Mythical 5th]

This extension loads a youtube video in an iframe, but does so by creating a data-uri. So that's an option which might work for you, and it's also a strong suggestion that adding an iframe to an extension page is not possible.

https://chromewebstore.google.com/detail/iframe-player/iommfgnaabngpaonfjceojnbckhognlk

[Mythical 5th]

I just edited an extension page in devtoools to add this line for an embedded youtube video. It works, but the iframe url you posted above does not. The extension has no hosts permissions.

<iframe src="https://youtube.com/embed/icljXo7qW2s"></iframe>

[Tim Steiner]

As far as I know, showing the video as an iframe with an embedded link does not allow me to interact with the player (state changes, seeking, ....).
The iframe api https://developers.google.com/youtube/iframe_api_reference does allow all kinds of interactions.

I went ahead and downloaded the script files from youtube and included them into the extension itself. While this all works, it is a very ugly hack that leads to a lot of maintenance effort as I have to ensure that the script is always up to date. So I'd still very much prefer if there was a way to use the script files directly from youtube's servers. In the meanwhile, I'll work on at least having them automatically downloaded and embedded during build time of the extension.