Chrome扩展程序单击由js创建的按钮

Question

当我使用contentscript时，请在网站页面上单击Javascript制作的按钮。

element.click()

我遇到相同的问题：单击不是函数，就像这样：

Can't click a button using a Chrome extension, but I can in the developer tools

但是，我可以手动单击该按钮来执行某些操作，就像下载文件一样。

感谢作者，我找到了解决方案：

var x =document.getElementById("someelement");
x.addEventListener('click',function myClick() {
  //here keep empty is ok. no need write anything
});
await sleep(10000);
x.click(); //this lead to the element 's original activity, just like download something....

现在，一切都很好，我的问题是：为什么？为什么这可以解决问题？

BTW，我引用的问题不是重复的，因为那是重复的，所以我不能直接在问题上问/答。

Answer 1

由于内容脚本在隔离的上下文中工作，因此脚本.click不知道element.click()会触发的处理程序列表，因此它不会触发任何操作。从内容脚本中添加新的处理程序将引用页面的原始脚本，这就是它确实触发事件的原因。

无论如何，这是克服“隔离”问题的一种方法，恕我直言，另一种方法更容易理解，它是触发纯DOM事件

这样的东西

const clickEvent = new Event('click');
const hasFired = element.dispatchEvent(clickEvent);
if(hasFired){
 // everything ok
} else {
 // someone blocked your handler
}

您可能会看到Event reference，因为有时您可能需要指定事件选项