javascript - Chrome扩展程序点击由js创建的按钮

标签 javascript google-chrome google-chrome-extension dom-events event-listener

当我使用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....

现在,一切正常,我的问题是:为什么?为什么这样可以解决问题?

顺便说一句,我引用的问题不重复,因为那被视为重复,所以我不能直接询问/回答这个问题。

最佳答案

由于内容脚本在隔离的上下文中工作,您的脚本 .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有时您可能需要指定事件选项,请尝试这个

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

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

关于javascript - Chrome扩展程序点击由js创建的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61429644/

相关文章:

html - 具有背景大小样式的图像标签

javascript - 将数组存储到 Cookie Jquery

css - 跨浏览器的背景图像位置存在细微差异

javascript - 如何将 Kendo UI datawiz 集成到页面上而无需刷新

javascript - chrome 中的 onunload 事件或者是否有其他解决方法

javascript - 在 Chrome 中设置 location.href 两次

google-chrome - Google Chrome 扩展程序错误 - Access-Control-Allow-Origin

javascript - 如何通过 Chrome 扩展模拟文件拖放上传?

javascript - `` 模板语法-优雅降级

javascript - (jQuery) 在 cookie 中单击时保存复选框状态