使用Chrome扩展从Gmail DOM获取元素

Question

我正试图从Gmail的DOM中获取一个元素。该元素有一个名为">.yP"的类(该元素显示收件箱列表中参与电子邮件的人员的姓名(。

在清单字段中，我有以下条目：

"content_scripts": [
{
"matches": [
"https://mail.google.com/*", 
"https://inbox.google.com/*"
],
"css": ["styles/test.css"],
"js": [
"libraries/jquery-3.4.1.min.js",
"content-scripts/test.js"
],
"run_at": "document_end"
}
]

CSS文件的内容是：

.yP:hover {
background-color: yellow;
}

它工作得很好，当我把鼠标放在元素上时，背景会变成黄色。

但是，问题是当我试图在我的内容脚本test.js中获取这些元素时，列表总是空的。然而，如果我在开发控制台中执行相同的指令，它会完美地工作。

var list = document.getElementsByClassName("yP");
console.log("List: " + list);

我做错了什么？

提前感谢！

Answer 1

您的javascript很可能在页面加载您要查找的类之前被调用。

你有没有试过把它包装在load监听器的窗口中？

window.addEventListener('load', (event) => {
var list = document.getElementsByClassName("yP");
console.log("List: " + list);
});

请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event