使用Chrome扩展程序内容脚本检测YouTube视频事件

Question

我正在撰写Chrome扩展程序，我希望在用户访问youtube.com观看视频时检测视频何时开始/结束。我的情况和我读过的其他教程之间的区别是我没有在我自己的网站上嵌入我自己的YouTube视频，我只想检测用户在youtube上观看的视频中的事件。

现在我的manifest.json文件包含以下内容脚本行：

function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('ytplayer', {
        events: {
            'onReady': onPlayerReady,
        }
    });
}

function onPlayerReady(event) {
    console.log('It worked!');
}

我已下载jquery，iframe_api.js是https://www.youtube.com/iframe_api的内容。我的contentScript.js文件非常简单，我只想在视频准备就绪时将某些内容打印到控制台：

{{1}}

有人可以帮帮我吗？内容脚本是否可以执行此操作，或者我是否可以访问youtube视频的iframe，因为它不在内容脚本所在的“隔离环境”中？

Answer 1

我发布这个问题后不久，我找到了答案。不使用youtube iframe api，而是使用html5 api。我将内容脚本修改为以下内容，以便在视频结束时打印消息并且工作正常。

var vid = $('video').get(0);

vid.addEventListener('ended', function(e) {
    console.log('The video ended!');
});

Answer 2

我在这里找到了类似的问题，答案很好（HTML5很棒！！） How to play and pause a Youtube video in the console?

例如，您可以使用它们来播放/暂停视频（在youtube.com上，外部网站上没有youtube iframe）

D2

还有更多功能可让您跟踪视频长度，当前播放时间等。

P.S：我有一个相同的问题已有一天多了，令人惊讶的是，很难找到正确的答案/指南！希望这会有所帮助

Answer 3

这晚了晚些，但是我最近才刚遇到这个问题，并且发现对于在哪里可以找到“ HTML5 API”事件没有任何跟进。

GabeMeister的答案是正确的解决方案，但是在任意给定的YouTube视频页面上的控制台中使用getEventListeners(document.querySelector("video"))都会向您显示可以在脚本中收听的事件列表。

在撰写本文时，这些是从上一行返回的事件：

• 玩
• 暂停
• 在图片中输入图片
• 将图片留在图片中
• loadeddata
• volumechange
• timeupdate
• 播放
• durationchange
• 寻求
• 寻求
• 错误
• loadedmetadata
• 等待中
• 进步
• 重点
• loadstart
• 已结束
• 暂停
• ratechange
• 调整大小

这些与iFrame API分开，可以从内容脚本或通过控制台进行侦听。希望这会有所帮助！