带有 Youtube API 的 Chrome 扩展显示不一致的结果答案

【问题标题】：Chrome extension with Youtube API showing inconsistent results带有 Youtube API 的 Chrome 扩展显示不一致的结果
【发布时间】：2012-03-23 14:30:16
【问题描述】：

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

#<HTMLEmbedElement> has no method 'getPlayerState'

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

【问题讨论】：

标签： google-chrome google-chrome-extension youtube-api

【解决方案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");
};

【讨论】：