Chrome扩展程序中的Youtube播放器API

时间:2015-03-24 22:51:55

标签: google-chrome-extension youtube-api

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

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

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

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

在代码方面,我想获得帮助,设置能够加载外部脚本所需的权限 我看到需要在content_security_policy文件中声明manifest,但我不懂语法以及如何写下来,所以我想有一个例子,不管是什么需要它。

在我的内容脚本中,我正在使用从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! ---');
}

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:-3)

这应该保存在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"
]
}