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

Question

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

第一种方法：content_scripts

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

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

我正在为每个 YouTube link 加载脚本，而不仅仅是 /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 的每个 child，但没有任何效果。）

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

因为我的第一种方法似乎遇到了 dead-end，所以我尝试了其他方法：直接在页面内注入脚本。

我的 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`

的内容

嗯，这是我遇到第二个dead-end的地方。我可能忽略了一些东西，但我在页面内的每个 object 中进行了搜索，我找到了 yt、ytplayer、player 等。但其中 none 似乎具有适当的功能来触发播放器的变化，例如 play/pause/next 等

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

这正是我想要的功能 call/invoke，但我不知道它们在哪里，也不知道如何调用它们。

我也知道YouTube有一个JavaScriptAPI来控制播放器，但它只针对嵌入式播放器（iframe），所以不是对我有用。

Answer 1

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

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

界面为here。

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

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

因为这显然不是已发布的 API 你不能保证那些 class 名字在未来会保持不变。

Answer 2

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

然而，还有另一种方式：元素'#movie_player'也提供了所有这些功能。所以通过它的 ID 获取 movie_player 然后执行 "playVideoAt" 工作。

Answer 3

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

希望对您有所帮助。

Answer 4

我来晚了，但我认为它仍然可以帮助别人。如果您希望在 content_scripts 内使用 jQuery 控制 HTML5 视频播放器，那么您可以使用 $("video")[0] 获取视频元素，然后使用它来触发有效事件，例如

$("video")[0].pause()
$("video")[0].play()
..

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

Control YouTube player from a Chrome extension

javascript

jquery

javascript-injection

google-chrome-extension

jquery-events

第一种方法：content_scripts

我是如何接管控制权的

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

`isolated.js`

`injected.js`