Using YouTube IFrame API in a Chrome Extension

Question

I am trying to build a Chrome Extension that can interact with videos in YouTube.

I can get the player element and use the Youtube's IFrame API functions on them in my browser console without no issue, like:

var player = document.getElementById('movie_player');
player.playVideo()
player.pauseVideo()
player.seekTo(30)
player.getStatsForNerds(0)

But I want to do these kinds of operation through a Chrome Extension. The issue is when I try to use the player element to use these functions in an extension it returns errors like this:

Uncaught TypeError: player.playVideo is not a function

I thought I may need to load the IFrame API, but when I try to load it it returns:

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.

My project directory:

├── manifest.json
├── content-scripts.js
└── background.js

manifest.json:

{
  "name": "My Project",
  "description": "Some Description",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/*"],
      "exclude_matches": ["https://studio.youtube.com/*"],
      "js": ["content-scripts.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["content-scripts.js"],
      "matches": ["https://www.youtube.com/*"]
    }
  ],
  "permissions": [
    "activeTab",
    "tabs",
    "contextMenus",
    "storage",
    "scripting"
  ],
  "host_permissions": ["https://www.youtube.com/*"]
}

content-scripts.js:

function inject_yt() {
    player = document.getElementById('movie_player');

    var speeds = new Array();
    var resolutions = new Array();
    var times = new Array();
    var buffer = new Array();

    stats_collect = setInterval(stats, 1000);
}

function stats() {
    try {
        bandwidth = player.getStatsForNerds(0).bandwidth_kbps;
        res = player.getStatsForNerds(0).resolution;
        buffers = player.getStatsForNerds(0).buffer_health_seconds;

        speeds.push(bandwidth);
        resolutions.push(res);
        buffer.push(buffers);
        currentTime = player.getCurrentTime();
        times.push(currentTime);
    }
    catch(err) {
        console.error(err);
    }
}

var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    console.log('--- the YT player API is ready from content script! ---');
};

inject_yt()

And background.js is just an empty file.

How can I make this work?