Question

我正在制作Google Chrome扩展程序，该扩展程序依赖于了解“youtube.com”上正在播放的视频的当前时间。原则上我知道document.getElementById('movie_player').getCurrentTime()应该返回这个，但是在注入页面的内容脚本中调用它会产生：

未捕获的TypeError： document.getElementById（'movie_player'）。getCurrentTime不是函数（...）

我可以在Chrome控制台中运行该命令并获得正确的返回值。

在此之前被标记为重复的问题，我想指出我正在谈论在'youtube.com'上这样做。我不知道我是否应该期待特殊行为，但这绝对是与我在stackoverflow上发现的其他问题不同的背景。

为了提供帮助，下面是我可以想出的最简单的代码来重现这个问题。要使其正常运行，您需要load this as an unpacked extension。然后导航到任何YouTube视频。单击扩展图标，然后单击“开始测试”按钮。还要确保打开控制台（ F12 ）。

提前感谢您提供有关如何使此方法有效的建议，或者我可以获得我需要的其他方式（例如，我希望获得时间值的分享，但无法想出那个）。作为最后的手段，我正在考虑用我自己的iframe替换youtube播放器并尝试这种方式。

popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <script src='popup.js'></script>

  </head>
  <body>
    <input type='button' id='start' value='Start The Test'></input>
    <p id="messages"></p>
    <p id="result"></p>
  </body>

</html>

popup.js

// Add listener for start button
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("start").addEventListener('click', process_video);
});


function process_video() {
    chrome.tabs.executeScript(null, {file: 'test.js'});
}

test.js

player = document.getElementById('movie_player');
console.log(player);
console.log(player.getCurrentTime()); // ERROR IN QUESTION IS PRODUCED WITH THIS COMMAND

的manifest.json

{
  "manifest_version": 2,

  "name": "It's a placeholder",
  "description": "This is only a test",
  "version": "1.0",

  "browser_action": {
    "default_popup": "popup.html",
    "default_title": "My Test"
  },

  "permissions": [
    "activeTab",
    "http://localhost/*",
    "https://www.youtube.com/*"
  ]

}

Answer 1

感谢Charlie Dalsass（见下面我的问题的评论），我想我有答案了！

test.js

video = document.getElementsByClassName('video-stream')[0];
console.log(video);
console.log(video.currentTime);

Answer 2

此代码将于2020年生效：

// 1. ytplayer code: https://developers.google.com/youtube/player_parameters#IFrame_Player_API
var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      height: '360',
      width: '640',
      videoId: 'M7lc1UVf-VE'
    });
  }
// 2. get player.playerInfo.currentTime
window.onclick = () => {
  console.log(player);
  alert(player.playerInfo.currentTime);
}

see it live on codepen

在youtube.com上获取Youtube Video的当前时间（例如document.getElementById（'movie_player'）。getCurrentTime（））

2 个答案: