使用Youtube API的Chrome扩展显示不一致的结果

Question

我正在构建一个chrome扩展，以使用youtube的API。这就是它的工作原理：

通过manifest.json 在每个youtube页面上自动注入内容脚本

"permissions": ["tabs", "http://*/*", "https://*/*", "<all_url>", "background"],
"content_scripts": [
  {
    "matches": ["http://www.youtube.com/*"],
    "js": ["inject.js"]
  }
]  

我有很多调试点，所以我知道每一页都会加载内容脚本和listen.js。

使用内容脚本，我注入了一段额外的javascript代码来监听播放器状态。如果玩家状态发生变化（暂停、播放、结束…），则会记录在控制台中。

// inject listen.js into current webpage
var s = document.createElement('script');
s.src = chrome.extension.getURL("listen.js");
s.onload = function() {
   this.parentNode.removeChild(this);
};
(document.head||document.documentElement).appendChild(s);

然后，在listen.js中，我收听youtube的播放器状态。

var currentVideo = document.getElementById("movie_player");
currentVideo.addEventListener("onStateChange", "onytplayerStateChange");
function onytplayerStateChange() {
    console.log("state changed");
};

唯一的问题是我不能让它持续工作。一些Youtube页面提供玩家状态的反馈，其他页面则没有。也没有返回模式。以前工作的youtube页面可能会在下次失败。只有当我重新加载扩展并在新窗口中打开youtube视频时，播放器状态才会记录在控制台中。

在失败的youtube页面上，listen.js中的eventlistener似乎不活跃。如果我试图在控制台中记录播放状态，则会显示此错误：

#<HTMLEmbedElement> has no method 'getPlayerState'

知道为什么我不能得到一致的结果吗？我的权限有问题吗？

Answer 1

方法"getPlayerState"似乎没有启动，因为视频尚未加载。要修复它，只需将addEventListener放入名为"onYouTubePlayerReady（playerID）"的函数中，该函数是YouTube javascript API的一部分。

function onYouTubePlayerReady(playerId) {
    var currentVideo = document.getElementById("movie_player");
    currentVideo.addEventListener("onStateChange", "onytplayerStateChange");
}
function onytplayerStateChange() {
  console.log("state changed");
};