带有 Youtube API 的 Chrome 扩展程序显示不一致的结果

我正在构建一个 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 中的事件侦听器似乎未处于活动状态。如果我尝试在控制台中记录玩家状态，则会出现此错误：

#<HTMLEmbedElement> has no method 'getPlayerState'

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

似乎方法“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");
};