如何允许 chrome 扩展程序访问第三方 API 脚本？

Question

我正在尝试从 YouTube 的 iframe 播放器 API 访问脚本，以便 play/pause 视频，用于 chrome 扩展。我的JS在下面（来自https://developers.google.com/youtube/iframe_api_reference）。

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 onYouTubePlayerAPIReady() {
    player = new YT.Player('video', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    player.playVideo();
}

但是，当我将扩展加载到 Chrome 时，出现以下错误：

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.

我尝试将 URL 添加到 Manifest.json 中的 CSP（如下）。我还删除了所有内联 JS。

"content_security_policy": "script-src 'self' https://www.youtube.com/iframe_api; object-src 'self'"

现在，扩展加载失败并出现错误，我的 CSP 值无效。知道我做错了什么吗？

Answer 1

您可以检查 chrome.scripting.executeScript()，这允许您加载库，然后执行一些使用它的代码。为此，您需要将它与扩展的其余部分放在同一文件夹中（只需将库复制到一个 js 文件）。使用该库的代码必须在 chrome.scripting.executeScript 的初始承诺得到解决后执行。

https://developer.chrome.com/docs/extensions/reference/scripting/#usage

如何允许 chrome 扩展程序访问第三方 API 脚本？

How do I allow a chrome extension to access a third-party API script?

manifest

google-chrome-extension

content-security-policy

youtube-iframe-api