video - 获取 youtube 视频播放的当前时间

Question

所以我正在开发一个 chrome 扩展。我正在尝试获取 Youtube 视频的当前播放时间

我知道在其他帖子中有很多类似的问题，但他们的代码都不适合我

我的代码是这样的，我必须先将我的代码注入(inject)到内容脚本中

chrome.tab.query({highlighted: true}, tabs => {
   tab = tabs[0]
   chrome.tabs.executeScript(tab.id, {code: "temp = 
                             document.getElementById('movie_player'); 
alert(temp); alert(temp.getCurrentTime());"}, respond => {});
}

所以当我运行它时，我会得到一个警告说[object HTMLDivElement]。但不会从 temp.getCurrentTime() 中得到任何东西。

Answer 1

问题:

元素是一个复杂的对象，因此它无法通过 alert() 以有意义的方式显示，这就是为什么您会看到 [object HTMLDivElement] .反正你不需要它，我猜这是一个测试。

实际的问题是 #movie_player是 <div>大量 YouTube 播放器 API 函数暴露 在页面上下文中 ，但不是在所有内容脚本都运行的孤立世界中。要访问页面上下文，您必须 use a page script自己，这是不必要的复杂。

解决方案:
访问 <video>暴露 currentTime 的元素作为标准 DOM 属性，因此它在页面上下文和内容脚本的孤立世界中都可用。然后通过将结果设置为 code 中的最后一个表达式，将结果传输到回调中。字符串:

chrome.tabs.executeScript({
  code: 'document.querySelector("video").currentTime'
}, results => {
  const time = results && results[0];
  console.log(time);
});

结果应该是一个简单的类型，如字符串/数字/ bool 值/null 或由此类简单类型组成的数组/对象，这意味着您不能传输 DOM 元素和函数；

结果应该在回调中使用，因为它是异步调用的，这意味着它会在以后的某个时间运行，在外部代码已经完成之后，更多信息:Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference ;

如果您总是想处理事件选项卡，则不需要在 executeScript() 中指定 tabId，因此也不需要 chrome.tabs.query()。

返回多个属性:

chrome.tabs.executeScript({
  code: `(${() => {
    const el = document.querySelector('video');
    return {
      time: el.currentTime,
      duration: el.duration,
    };
  }})()`
}, results => {
  const info = results && results[0];
  console.log(info);
});