如何允许 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 脚本?的主要内容,如果未能解决你的问题,请参考以下文章

从Chrome扩展程序访问Google文档

关于Chrome 67 以后版本无法离线安装扩展的解决方法

将 Google API Javascript 客户端库加载到 Chrome 扩展程序中

如何在网页中调用chrome浏览器里的扩展程序

跨域 Chrome 扩展

Chrome扩展程序Secure Shell套接字访问