从 Chrome 扩展程序控制 YouTube 播放器

Posted 2023-02-19

【中文标题】从 Chrome 扩展程序控制 YouTube 播放器

【英文标题】：Control YouTube player from a Chrome extension

【发布时间】：2015-09-15 22:45:30

【问题描述】：

我正在开发一个 Google Chrome 扩展程序，它需要接管 YouTube 视频的所有控件（播放、暂停、下一个、上一个、更改音量、在 X 秒时开始视频等） .我尝试了以下方法：

第一种方法：使用 content_scripts

我的manifest.json 包含以下内容：

"content_scripts": [
    
        "matches": ["https://www.youtube.com/*"],
        "js": ["scripts/jquery.js", "scripts/in_page.js"]
    
],

我正在为每个 YouTube 链接加载脚本，而不仅仅是 /watch*，因为现在 YouTube 导航完全使用 AJAX，因此页面没有完全刷新，如果我在搜索页面上然后点击了视频，扩展程序不会加载我的content_scripts。

我是如何接管控制权的

我成功触发了 YouTube 播放器上的简单点击事件，例如播放、暂停、上一个视频、下一个视频。

例如，这可以暂停视频：

$("#player-api .html5-video-controls .ytp-button-pause").trigger("click");

但我似乎无法触发事件，例如点击进度条从视频的特定时刻开始播放或重新启动视频。

我尝试了这段代码但没有成功（使用 jQuery 的$.Event）：

var click = $.Event("click");
click.clientX = 0; // Beginning of the video
click.clientY = 0; // I also tried several other coordinates
$("#player-api .html5-video-controls .html5-progress-bar").trigger(click);

（我还尝试单击.html5-progress-bar 的每个子项，但没有任何效果。）

第二种方法：使用注入脚本

由于我的第一种方法似乎遇到了死胡同，然后我尝试了其他方法：直接在页面内注入脚本。

我的manifest.json 包含以下内容：

"content_scripts": [
    
        "matches": ["https://www.youtube.com/*"],
        "js": ["scripts/jquery.js", "scripts/isolated.js"]
    
],

"web_accessible_resources": [
    "scripts/injected.js"
],

isolated.js的内容

var s = document.createElement("script");
s.src = chrome.extension.getURL("scripts/injected.js");
s.onload = function() 
    this.parentNode.removeChild(this);
;
(document.head || document.documentElement).appendChild(s);

injected.js的内容

嗯，这是我遇到第二个死胡同的地方。我可能忽略了一些东西，但我在页面内的每个对象中进行了搜索，我找到了yt、ytplayer、player 等。但是它们似乎都没有适当的功能来触发播放器的更改，例如播放/暂停/下一个等。

然后，我从 YouTube (available here) 下载了 html5player.js，并对其进行了美化，以了解其背后的内容。我在 20235-20315 行周围发现了一些有趣的函数名称，例如 playVideoAt、playVideo、pauseVideo（经过美化）。

这正是我想要调用/调用的函数，但我不知道它们在哪里，以及如何调用它们。

我也知道 YouTube 有一个 javascript API 来控制播放器，但它只适用于嵌入式播放器（iframe），所以对我来说没用。

【参考方案1】：

听起来您正在使用 YouTube 的 HTML5 视频播放器。在这种情况下，您可以只与<video> DOM 元素交互。它恰好是页面上唯一的 <video> 元素，所以这样做：

$('video').play()
$('video').pause()
$('video').currentTime = 100

接口是here。

至于上一个和下一个视频，您几乎可以肯定，最简单的做法是：

$('.ytp-button-next').click()
$('.ytp-button-prev').click()

由于这显然不是已发布的 API，因此您无法保证这些类名在未来会保持不变。

【讨论】：

好吧，不用说，它显然比我想象的要简单得多。非常感谢！哦，顺便说一句，这似乎只在注入脚本（而不是内容脚本）中工作。

我弄错了，它也可以在 content_scripts 中使用，但只能使用 document.getElementsByName("video")[0]，因为 $("video").play() 表明 play 不是函数。

【参考方案2】：

我迟到了，但你可以使用 Youtube 提供的 API。看这里：https://github.com/kurtextrem/StopAutoplay/blob/master/src/main.js

但是，还有另一种方式：元素“#movie_player”也提供了所有这些功能。所以通过它的 ID 获取movie_player，然后执行“playVideoAt”就可以了。

【参考方案3】：

为时已晚，但我最近为它创建了一个 chrome 扩展：https://chrome.google.com/webstore/detail/youtube-playback-control/okbcoijdeebocmahlanbfemnckjonfnh

希望对你有帮助。

【讨论】：

这有帮助。我有一个问题 - 您如何处理 tabId 和 popup.js 之间的消息传递？具体来说，谁在收听“toggle_video_state”消息，当您收到此消息时您在做什么？

@ShubhamGupta 您可以在 content_scripts 部分中指定一个 js 文件，该文件将添加到与提供的 url 匹配的每个页面。在该 js 文件中，您可以指定 onMesasgeListener ，它是一个 chrom api。也可以在这里查看 github 仓库：github.com/shahankit/youtube-playback-control