Chrome extension javascript

Question

https://i.stack.imgur.com/S0u6W.png

对于某些上下文，请查看提供的图像，

网站中每隔几秒钟就会自动出现3种类型的框，"嗨"，"您好"和"嘿"。 您可以单击该框，它将被添加到右侧。

<div class="h-240 rounded relative bg-gray-400 cursor-pointer hover:bg-gray-300 transition duration-75 ease-in-out">
<span class="inline-block ml-10 text-gray-200"> (Hello)</span>
</div>
<div class="h-240 rounded relative bg-gray-400 cursor-pointer hover:bg-gray-300 transition duration-75 ease-in-out">
<span class="inline-block ml-10 text-gray-200"> (Hi)</span>

<div class="h-240 rounded relative bg-gray-400 cursor-pointer hover:bg-gray-300 transition duration-75 ease-in-out">
<span class="inline-block ml-10 text-gray-200"> (Hey)</span>
</div>
<div class="h-240 rounded relative bg-gray-400 cursor-pointer hover:bg-gray-300 transition duration-75 ease-in-out">
<span class="inline-block ml-10 text-gray-200"> (Hey)</span>
</div>
<div class="h-240 rounded relative bg-gray-400 cursor-pointer hover:bg-gray-300 transition duration-75 ease-in-out">
<span class="inline-block ml-10 text-gray-200"> (Hello)</span>
</div>

如何制作内容脚本以自动单击带有"Hello"的任何框。

Answer 1

不能在后台脚本中执行此操作。 它必须在内容脚本中完成。

脚本.js

setInterval(() => {
document.querySelectorAll('div').forEach(div => {
div.getElementsByTagName('span')[0].innerHTML.includes('Hello') && div.click();
});
}, 1000);

manifest.json

{
"manifest_version": 2,
"name": "Hello Box Clicker",
"permissions": [
"activeTab"
],
"version": "0.0.0.1",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"script.js"
]
}
]
}