我正在开发一个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/*"],"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);

注入的内容.js

嗯,这是我遇到第二个死胡同的地方.我可能忽略了一些事情,但我搜索了页面内的每个对象,我找到了yt,ytplayer,player和其他人.但是它们似乎没有适当的功能来触发播放器上的更改,例如播放/暂停/下一个等.

然后我从YouTube(available here)下载了html5player.js并对其进行了美化,以便了解引擎盖下的内容.我发现了一些有趣的功能名称,如playVideoAt,playVideo,pauseVideo,围绕20235-20315行(曾经美化过).

那将是我想要调用/调用的函数,但我不知道它们在哪里,以及如何调用它们.

我也知道YouTube有一个JavaScript API来控制播放器,但它只适用于嵌入式播放器(iframe),所以它在我的情况下没用.

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

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