我无法在我的 YouTube 通知弹出窗口中获取 firstChild 元素

Question

我正在尝试 chrome 扩展。我尝试创建一个 div 并将其放在我们通过单击 this button 打开的 youtube 通知弹出窗口的顶部。

所以我尝试捕获容器的第一个 child 并创建一个 insertBefore。但是我有一个问题：我无法获取容器的 firstChild 元素，或者它始终为空。

我尝试了这个代码，但我不知道它是否是好的方法:

const notificationsContainer = document.querySelector("#container > #sections");
notificationsContainer.style.backgroundColor = "blue"; //to view my container

/* Creation of my new div */
let newDiv = document.createElement("div");
newDiv.style.backgroundColor = "green";
newDiv.style.height = "50px";
newDiv.style.width = "50px";
newDiv.style.top = "0";

/* Insert my newDiv */
let parentElement = document.querySelector("#items");
let childElement = parentElement.firstChild;
parentElement.insertBefore(newDiv, childElement);

这是我在控制台中打印 parentElement 和 childElement 的时候（它们是空的）：console print

感谢您的帮助！

P.S. 我正在尝试获取我的通知，所以我用 js 删除它们，如果你知道更好的方法，我很乐意听取它。

编辑： Here 检查器屏幕截图聚焦于所选元素。

Answer 1

您确定您定位的元素有子元素吗？如果没有，.first Child 将 return null.

Answer 2

时间可能有问题。抓取时元素为空，抓取后填充。

也许你需要等待“一段时间”。

尝试通过设置超时 (setTimeout) 在几秒后抓取 item。

我无法在我的 YouTube 通知弹出窗口中获取 firstChild 元素

I can't get the firstChild element on my youtube notifications popup

javascript

html

css

google-chrome-extension