第一种方法：使用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),所以它在我的情况下没用.
