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....

现在，一切正常，我的问题是：为什么？为什么这样可以解决问题？

顺便说一句，我引用的问题不是重复的，因为那是重复的，所以我不能直接在问题上ask/answer这个。

Answer 1

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

无论如何，这是克服"isolation"问题的一种方法，恕我直言，另一种方法更容易理解，是触发一个纯粹的DOM事件

像这样

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

您可以查看 Event reference，因为有时您可能需要指定事件选项，试试这个

const clickEvent = new Event('click', {cancelable: false, bubbles: true});

我记得我遇到过和你一样的问题，我用这个解决了

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

Chrome extension click a button that is create by js

javascript

google-chrome

event-listener

google-chrome-extension

dom-events