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

【问题标题】：How do I allow a chrome extension to access a third-party API script?如何允许 chrome 扩展访问第三方 API 脚本？
【发布时间】：2021-12-31 16:00:55
【问题描述】：

我正在尝试从 YouTube 的 iframe 播放器 API 访问脚本，以便播放/暂停视频，以获得 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 时，我收到以下错误：

拒绝加载脚本“https://www.youtube.com/iframe_api”，因为它违反了以下内容安全政策指令：“script-src 'self'”。请注意，'script-src-elem' 没有显式设置，因此 'script-src' 用作备用。

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

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

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

【问题讨论】：

扩展加载失败，控制台没有任何错误？
@granty 刚刚编辑了原始帖子——我收到一个错误，指出我的 CSP 值无效，但我找不到语法错误。
似乎未应用来自content_security_policy 的 CSP。可能是因为您使用了 mafifect V3，其中 content_security_policy 应该是 JSON 对象，或者您将 content_security_policy 放在了错误的位置。您可以将您的manifest.json 附加到问题中吗？

标签： google-chrome-extension manifest content-security-policy youtube-iframe-api

【解决方案1】：

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

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

【讨论】：

我将 API 复制到我的代码中并使用了 chrome.scripting.executeScript()，它成功了！非常感谢！