允许 Youtube iframe 显示与 Youtube.com 兼容的 Chrome 扩展程序

Posted 2023-02-24

【中文标题】允许 Youtube iframe 显示与 Youtube.com 兼容的 Chrome 扩展程序

【英文标题】：Allow a Youtube iframe to display Chrome extensions compatible with Youtube.com

【发布时间】：2015-07-15 11:35:36

【问题描述】：

我正在使用 Youtube iframe API 开发一个网站，并且我希望在我的网站上的 Youtube iframe 中允许在 Google Chrome 上使用 Chrome 扩展程序（Musixmatch，我不是自己开发的），供用户使用谁安装了该扩展程序，以便他们可以在音乐视频上显示歌词。

我不清楚我是否能够做到这一点 - 这是 Musixmatch 必须允许的事情，还是我真的可以做点什么？此问题并非特定于 Musixmatch 扩展。 Youtube iframe API似乎会自动调用一些Chrome扩展，所以我认为可以调用特定的。

我很难在互联网上找到有关这方面的信息。我认为这篇文章指的是同样的问题，但从 Chrome 扩展开发者的角度来看：https://***.com/questions/27739727/how-to-make-chrome-extension-work-in-iframe。这是一篇关于 Youtube API 触发特定 Chrome 扩展的帖子：Chrome YouTube cast_sender.js console error。

任何帮助或见解将不胜感激！

【参考方案1】：

我不认为你能做到，因为扩展自己决定何时注入他们的代码，而不是相反。 YouTube 通常不会“调用”任何扩展程序，Chromecast 是一个例外 - 但它是由 Google 提供的，YT 预计会这样做。

例如，在 YouTube 的情况下，此逻辑可能包含在扩展程序清单中指定的匹配模式中。在不更改清单的情况下，您无法“说服”Chrome 将其注入其他地方。

或者，检查可以在代码中运行时进行。同样，在不改变这一点的情况下，如果不希望将扩展程序注入到 YT 的嵌入页面中，则不会。

【讨论】：

是的，当我在我的 Youtube iframe 上看到 Chromecast 扩展程序调用时，我开始希望我可以让其他扩展程序在那里工作 - 显然这是不可能的 :( 谢谢！

【参考方案2】：

我不是 100% 清楚你的问题的范围。如果您询问扩展是否可以访问 iframe 的 DOM，那么答案是否定的——CSP 模型非常明确地禁止这样做。您可以从扩展程序对 iframe 执行 postMessage（就像您从页面本身执行操作一样......使用 contentWindow 对象），但是使用 postMessage 您仍然只能触发公开的方法，并且它们已经可以通过 YouTube iframe 获得API。

如果您的问题是关于能够听到 iframe API 事件并通过 iframe API 控制播放器，那么是的……这是可能的。您需要将脚本注入到可以听到事件并触发 API 方法的页面中，然后注入的脚本可以与您的后台页面对话以执行您的扩展程序需要执行的其他操作。有几个关于如何做到这一点的问题......这是最近的一个：

Youtube player API in Chrome extension

【讨论】：

基本上我希望扩展在我网站上的 Youtube iframe 上工作，就像在 Youtube 网站上工作一样。如果允许 Musixmatch，如果我在 Youtube.com 上观看视频，它将显示歌词；但如果我在我的网站上观看它就不会。我正在开发包含 Youtube iframe 的网站，我没有开发扩展。我的问题是：我这边有什么可以做的吗？我仍在处理您的回答，但我认为您没有回答我的问题 - 感谢您的意见，我希望我的评论可以帮助您了解我的问题。

啊……明白了。因此，您无需自己编写扩展程序。这确实帮助我知道你在问什么，但不幸的是它也让我说这可能不会按照你想要的方式工作；当 YouTube 播放器在嵌入到其他人网站的 iframe 中时，它使用的 DOM 结构和 iFrame 中的 API 与播放器在 YouTube.com 上时使用的略有不同。但是，您越接近模仿 YouTube.com 上的情况，您就会越好……例如，YouTube.com 为其播放器提供 ID“movie_player”，并在那里公开 API 事件。

我会朝这个方向努力，非常感谢您的建议