从内容脚本触发点击事件 - chrome 扩展

Question

在我的 chrome 扩展程序的内容脚本中，我点击了来自某些网站的网页上的某些链接/按钮。为此，我在内容脚本中使用了以下代码（我在内容脚本中嵌入了 jQuery）：

$(css_selector).trigger("click")

这适用于大多数网站。

但是，在 delta.com、match.com 和 paypal.com 等某些网站上，这种触发元素点击的方式不起作用。在 delta.com 上，当我尝试在内容脚本中触发时抛出以下异常：

Error: An attempt was made to reference a Node in a context where it does not exist.
Error: NotFoundError: DOM Exception 8

奇怪的是，如果我在 delta.com 上打开 javascript 控制台，包含一个 jQuery 并尝试相同的点击触发代码 sn-p，它就可以工作。

在 match.com 和 paypal.com 上，触发在内容脚本中根本不起作用，也没有错误。我什至无法像在 delta.com 上那样通过 javascript 控制台触发“点击”事件。

如果我手动使用鼠标点击，这三个站点上的一切都正常。因此，我也尝试使用 mousedown()、mouseup() 进行模拟，但也没有用。

这似乎是个问题，因为来自这些网站的 javascript 正在劫持和忽略事件。我试图从这些站点读取代码以查看发生了什么，但代码太多了。

有没有人知道这里发生了什么以及如何解决它？

Answer 1

由于浏览器扩展沙盒和基本 jQuery 功能，您无法使用 trigger 或 click 触发非 jQuery 点击事件。

但是，您可以调用原始 DOM 元素 click 方法，该方法的作用与使用鼠标单击该元素完全一样。只需使用[0] 访问 DOM 元素：

$(css_selector)[0].click();

虽然您很少需要，但您可以使用each 中的相同代码触发所有匹配按钮。由于each 中的 this 是 DOM 元素，因此非常简单：

$(css_selector).each(function(){
    this.click();
});

Answer 2

jQuery 的点击触发功能不会触发非 jQuery DOM 点击监听器（jsfiddle.net/k2W6M）。

jQuery 文档确实应该指出这个事实。我敢肯定，不止一些人为此疯狂追逐。

几天来我一直在为同样的问题苦苦挣扎，试图在带有 .click() 和 .trigger("click") 的链接上触发 onclick 处理程序，但都是徒劳的，直到我看到了。

为了得到这个问题的完整答案，向元素发送MouseEvent 与单击元素的效果相同。以下代码对我有用，并且在尝试从内容脚本单击页面上的元素/链接时应该可以工作：

$(css_selector)[0].dispatchEvent(new MouseEvent("click"))

Answer 3

content_script 被沙盒执行，见https://developer.chrome.com/extensions/content_scripts

但是，内容脚本有一些限制。他们不能：

• 使用由其扩展页面定义的变量或函数
• 使用网页或其他内容脚本定义的变量或函数

---

content_script中的$不能访问网页上的$，但是事件数据存储在$里面，所以我们无法触发。

// taken from jQuery#1.11.2 from line4571, trigger method
...

// jQuery handler
handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
if ( handle ) {
    handle.apply( cur, data );
}

// Native handler
handle = ontype && cur[ ontype ];