Javascript 从Chrome扩展控制YouTube播放器

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

第一种方法：使用content\u脚本 My

manifest.json

包含以下内容：

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

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

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

我正在加载每个YouTube链接的脚本，而且不仅仅是

/watch*

，因为现在YouTube导航完全使用AJAX，因此页面没有完全刷新，如果我在搜索页面上，然后单击视频，扩展就不会加载我的

内容脚本

我是如何接管控制权的
我成功地在YouTube播放器上触发了简单的点击事件，如播放、暂停、上一个视频、下一个视频

例如，这可以暂停视频：

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

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

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

（我还试着点击
.html5进度条的每个子项，但没有任何效果。）

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

My
manifest.json
包含以下内容：

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

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

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

isolated.js的内容
injected.js的内容
这就是我遇到第二个死胡同的地方。我可能忽略了一些东西，但我搜索了页面中的每个对象，找到了
yt
，
ytplayer
，
player
，以及其他一些。但它们似乎都没有适当的功能来触发对播放器的更改，如播放/暂停/下一步等

然后我从YouTube（）下载了
html5player.js
，并对其进行了美化，以窥视引擎盖下的内容。我在20235-20315行（曾经美化过）周围找到了一些有趣的函数名，如
playVideoAt
，
playVideo
，
pauseVideo

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

我也知道YouTube有一个JavaScript API来控制播放器，但它只适用于嵌入式播放器（iFrame），所以在我的情况下它没有用。
听起来你在使用YouTube的HTML5视频播放器。在这种情况下，您可以只与
DOM元素进行接口。它恰好是页面上唯一的
元素，因此只需执行以下操作：

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

界面是

对于上一段和下一段视频，您几乎可以肯定，最简单的方法是：

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

由于这显然不是一个已发布的API，您无法保证这些类名将来会保持不变。
我来晚了，但您可以使用Youtube提供的API。请看这里：

然而，还有另一种方法：元素“#movie_player”也提供了所有这些功能。因此，通过ID获取电影播放器，然后执行“playVideoAt”是可行的。
为时已晚，但我最近为同样的内容创建了一个chrome扩展：

希望能有帮助。
不用说，这显然比我想象的要简单得多。谢谢！哦，顺便说一句，这似乎只在注入脚本（不是内容脚本）中起作用。我错了，它在内容脚本中也起作用，但只能通过使用
document.getElementsByName（“video”）[0]
，因为
$（“video”）.play（）
提出
play
不是函数。这很有帮助。我有一个问题-您是如何处理tabId和popup.js之间的消息传递的？具体来说，谁在收听“toggle_video_state”消息以及当您收到此消息时您在做什么？@ShubhamGupta您可以在content_scripts部分指定一个js文件，该文件将添加到与提供的URL匹配的每个页面。在这个js文件中，您可以指定onMesasgeListener，它是一个ChromAPI。请在此处查看github回购：