如何允许 chrome 扩展访问第三方 API 脚本?
Posted
技术标签:
【中文标题】如何允许 chrome 扩展访问第三方 API 脚本?【英文标题】:How do I allow a chrome extension to access a third-party API script? 【发布时间】: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
附加到问题中吗?
【参考方案1】:
您可以检查 chrome.scripting.executeScript(),这允许您加载库,然后执行一些使用它的代码。为此,您需要将它与扩展的其余部分放在同一文件夹中(只需将库复制到 js 文件中)。使用该库的代码必须在 chrome.scripting.executeScript 的初始承诺解决后执行。
https://developer.chrome.com/docs/extensions/reference/scripting/#usage
【讨论】:
我将 API 复制到我的代码中并使用了 chrome.scripting.executeScript(),它成功了!非常感谢!以上是关于如何允许 chrome 扩展访问第三方 API 脚本?的主要内容,如果未能解决你的问题,请参考以下文章