为什么我的 chrome 扩展内容脚本不能访问页面元素的属性?

问题描述 投票:0回答:1

我正在尝试制作一个chrome扩展,它将提供 ctrl+left arrowctrl+right arrow 向后或向前2秒的YouTube视频。这是我的脚本。

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 脚本中没有返回任何内容.如何解释? 我如何才能使这个工作?

javascript google-chrome google-chrome-extension
1个回答
2
投票

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

这意味着你不能访问原始页面上的JS。

你可以做的是克服这个问题 inject 在原页面中的一个JS脚本。考虑到您可以访问相同的DOM,您可以使用 document.createElement('script') 来创建一个脚本,并将你的JS代码填充进去。

然后你可以使用 window.postMessage 向和从您的 contentinjected 脚本。

© www.soinside.com 2019 - 2024. All rights reserved.