【问题标题】:Youtube player API in Chrome extensionChrome 扩展中的 Youtube 播放器 API
【发布时间】:2015-05-28 10:59:01
【问题描述】:

我希望在我的 Youtube Chrome 扩展程序中使用 Youtube 播放器 API。
我的目标是能够使用 pageAction 的弹出窗口从我的内容脚本控制 Youtube 网站上的播放器控件。

事情是这样的-
单击弹出窗口中的“播放”按钮会向内容脚本发送消息,内容脚本接收消息并使用播放器 API 事件“playVideo()”播放视频。

由于内容脚本和页面本身是相互隔离的,所以我不能简单地从页面获取播放器的对象,据我所知,我不能使用消息从页面发送对象到内容脚本。

现在我可以通过使用 HTML5 视频事件来绕过所有这些麻烦,但不幸的是,这不适用于直播,因为那里仍在使用 flash,所以我别无选择,只能加载和使用播放器 API ,我说的对吗?
有没有办法使用 Youtube 网站本身的 URL 参数来控制播放器?
(我真的比加载额外的脚本和外部脚本更喜欢一切)

关于代码,我想获得帮助,设置能够加载外部脚本所需的权限。
我看到需要在manifest 文件中声明content_security_policy,但我不明白语法以及如何写下来,所以我想举个例子,请.

在我的内容脚本中,我使用来自 YT 播放器 API 文档的下一个代码来注入脚本:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubeIframeAPIReady() {
    console.log('--- The YT player API is ready from content script! ---');
}

【问题讨论】:

  • YouTube 视频的嵌入式 iframe 需要在 URL 中包含 enablejsapi=1。 YouTube 没有在他们的网站上使用 iframe API,所以这不起作用。
  • @kel:你的意思是用URL参数控制播放器不行吗?因为当涉及到使用播放器API时它确实有效,你可以打开控制台并输入例如: document.getElementById('movie_player').playVideo() 你会发现它工作得很好:) 现在的问题是如何加载它以在内容脚本中使用。
  • Google 关于如何在扩展(不是内容脚本)上注入 js。这使您可以访问播放器对象。
  • @ZigMandel:谢谢我这样做了,效果很好,我正在使用chrome.tabs.sendMessage从弹出窗口(扩展脚本)向内容脚本发送一条消息,然后这次从使用window.postMessage 注入脚本的内容脚本,所有信息都可以在这里找到:Communication with the embedding page
  • 很高兴它有帮助,我将其添加为答案。

标签: google-chrome-extension youtube-api


【解决方案1】:

由于内容脚本无法访问页面 javascript 对象,因此在页面中注入脚本(官方文档解释了如何)。注入的脚本可以访问对象,然后可以在 dom 上使用消息传递或写入与内容或弹出窗口进行通信。

【解决方案2】:

这应该保存在 manifest.json 中

 {
"manifest_version": 2,

"name": "example",
"description": "Lorem Ipsum dollar sit amet",
"version": "0.0",

"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
},
"permissions": [
  "activeTab",
  "tabs",
  "content_security_policy"
]
}

【讨论】:

  • 这是可行的,它是 chrome 指定的布局,也许“content_security_policy”可能不正确,但格式是。
  • @JosephHoyne 感谢您发布答案并希望提供帮助,但正如 Xan 所说,这是不正确的。我试过用这个但没有运气:"content_security_policy": "script-src 'self' 'unsafe-eval'; https://www.youtube.com/iframe_api; object-src 'self'"
猜你喜欢
  • 2015-09-15
  • 1970-01-01
  • 2018-04-30
  • 1970-01-01
  • 1970-01-01
  • 2014-11-12
  • 1970-01-01
  • 2019-01-11
  • 2020-01-23
相关资源
最近更新 更多