Question

我正在尝试创建一个Chrome扩展程序，该扩展程序将提供ctrl+left arrow和ctrl+right arrow来向后或向后转发YouTube视频2秒。这是我的脚本：

const player = document.querySelector('ytd-player').getPlayer();
const seconds = 2;
window.addEventListener('keydown', function (e) {
  if (e.ctrlKey) {
    if (e.keyCode === 37) {
      player.seekToStreamTime(player.getCurrentTime() - seconds)
    }
    else if (e.keyCode === 39) {
      player.seekToStreamTime(player.getCurrentTime() + seconds)
    }
  }
})
console.log('youtube-seconds extension loaded.');

如果我直接从chrome devTools运行，则该脚本有效，但是如果使用相同的代码进行扩展，则该脚本不起作用。

在研究了代码之后，我发现问题来自getPlayer函数。
如果我document.querySelector('ytd-player')但console.log从脚本中什么都不返回，则getPlayer可以很好地工作。如何解释呢？我该如何工作？我缺少许可之类的东西吗？

Answer 1

内容脚本与原始页面共享相同的DOM，但是具有不同的JS上下文。

这意味着您无法访问原始页面上的JS。

您可以采取的措施是在原始页面中inject编写一个JS脚本。考虑到您可以访问相同的DOM，可以使用document.createElement('script')创建脚本并用JS代码填充脚本。

然后，您可以使用window.postMessage在content和injected脚本之间发送消息。

为什么我的Chrome扩展程序内容脚本无法访问页面元素的属性？

1 个答案: