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似乎不是活动的。如果我尝试在控制台中记录playertate，则会显示错误：

#<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");
};

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

1 个答案: