11

在我的 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 并尝试相同的点击触发代码片段，它就可以工作。

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

如果我手动使用鼠标单击，则所有三个站点上的一切都正常。因此，我也尝试使用 mousedown()、mouseup() 来模拟，但这也不起作用。

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

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

4

3 回答 3

24

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

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

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

尽管您很少需要，但您可以使用each. 由于this in aneach是 DOM 元素，因此非常简单：

$(css_selector).each(function(){
    this.click();
});
于 2015-02-08T21:35:03.560 回答
12

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

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

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

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

$(css_selector)[0].dispatchEvent(new MouseEvent("click"))
于 2015-01-03T09:02:01.967 回答
0

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 ];
于 2015-01-08T13:24:32.943 回答