Javascript 为什么可以'；我的chrome扩展内容脚本可以访问页面元素'；谁的财产？

我正在尝试制作一个chrome扩展，它将提供

ctrl+left arrow

和

ctrl+right arrow

以将YouTube视频向后或向前播放2秒。这是我的剧本：

constplayer=document.querySelector（'ytd-player'）.getPlayer（）；
常数秒=2；
window.addEventListener（'keydown'，函数（e）{
如果（e.ctrlKey）{
如果（例如keyCode===37）{
player.seekToStreamTime（player.getCurrentTime（）-秒）
}
否则如果（e.keyCode===39）{
player.seekToStreamTime（player.getCurrentTime（）+秒）
}
}
})
log（'加载了youtube-seconds扩展名'）；

如果我直接从ChromeDevTools运行脚本，那么脚本可以工作，但是如果我使用相同的代码进行扩展，那么脚本就不能工作

在调查代码后，我注意到问题来自

getPlayer

函数。
如果I

console.log

但是

getPlayer

没有从脚本返回任何内容，则

document.querySelector（'ytd-player'）

工作正常。

---

你怎么解释呢？我怎样才能做到这一点？我是否缺少权限或其他内容？

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

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

要克服这个问题，您可以在原始页面中插入一个JS脚本。考虑到您可以访问相同的DOM，您可以使用

document.createElement（'script'）

创建脚本并用JS代码填充它

---

然后，您可以使用在

内容

和

脚本之间发送消息。
内容脚本与原始页面共享相同的DOM，但具有不同的JS上下文

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

要克服这个问题，您可以在原始页面中插入一个JS脚本。考虑到您可以访问相同的DOM，您可以使用
document.createElement（'script'）
创建脚本并用JS代码填充它

然后您可以使用在
内容
和
脚本之间发送消息。
我猜代码运行得太快了；您可能需要等待页面完全加载。试着用
setTimeout
@ChrisG包装它，我在问之前就这么做了。即使我等待5秒钟，它仍然返回未定义的
，这是否回答了您的问题？我猜代码运行得太快了；您可能需要等待页面完全加载。试着用
setTimeout
@ChrisG包装它，我在问之前就这么做了。即使我等待5秒钟，它仍然返回未定义的
，这是否回答了您的问题？OP说他们记录了
document.querySelector（'ytd-player'）
，它可以工作，所以情况似乎不是这样。你可以访问同一个DOM，所以
document.querySelector*
可以工作，但一旦你尝试访问任何JS，它就会停止工作。这样想吧：你只能获得一半的访问权限，当你试图访问另一部分时，它失败了。如果您想知道它们是如何实现这一点的：您有不同的窗口对象，但是window.document指向同一个对象。好的，当我阅读您的文章时，这是有意义的
getPlayer
在元素的JS范围内！我将尝试您建议的将代码直接注入页面的方法。Thanks@RaduDi好了，现在可以了。接受你的答案作为解决方案。很高兴它帮助了你。OP说他们记录了
document.querySelector（'ytd-player'）
，它可以工作，所以情况似乎不是这样。你可以访问同一个DOM，所以
document.querySelector*
可以工作，但一旦你尝试访问任何JS，它就会停止工作。这样想吧：你只能获得一半的访问权限，当你试图访问另一部分时，它失败了。如果您想知道它们是如何实现这一点的：您有不同的窗口对象，但是window.document指向同一个对象。好的，当我阅读您的文章时，这是有意义的
getPlayer
在元素的JS范围内！我将尝试您建议的将代码直接注入页面的方法。Thanks@RaduDi好了，现在可以了。接受你的答案作为解决方案。很高兴它帮助了你。