javascript 从内容脚本触发点击事件 - chrome 扩展
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17819344/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Triggering a click event from content script - chrome extension
提问by Methos
In my chrome extension's content script, I click on certain links/buttons on webpages from certain sites. To do that, I use following code in the content script (I embed jQuery in the content script):
在我的 chrome 扩展的内容脚本中，我点击了来自某些网站的网页上的某些链接/按钮。为此，我在内容脚本中使用了以下代码（我在内容脚本中嵌入了 jQuery）：
$(css_selector).trigger("click")
This works on most sites.
这适用于大多数网站。
However, on certain sites like delta.com, match.com, and paypal.com, this way of triggering a click on elements does not work. On delta.com, I get following exception thrown when I attempt triggering in the content script:
但是，在某些网站（如 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
Strange thing is, if I open javascript consoleon delta.com, include a jQuery and attempt the same click triggering code snippet, it works.
奇怪的是，如果我在 delta.com 上打开 javascript 控制台，包含一个 jQuery 并尝试相同的点击触发代码片段，它就可以工作。
On match.com and paypal.com, triggering simply does not work in the content script and there is no error. I cannot even trigger "click" event through javascript console the way I did on delta.com.
在 match.com 和 paypal.com 上，触发在内容脚本中根本不起作用，并且没有错误。我什至无法像在 delta.com 上那样通过 javascript 控制台触发“点击”事件。
If I manually use mouse click, everything works fine on all the three sites. Hence I also tried to simulate that using mousedown(), mouseup(), but that did not work either.
如果我手动使用鼠标单击，则在所有三个站点上一切正常。因此，我也尝试使用 mousedown()、mouseup() 来模拟，但这也不起作用。
This seems to be issue because javascripts from those sites are hiHymaning and ignoring events. I tried to read code from these sites to see what is happening but there was simply too much code.
这似乎是个问题，因为来自这些站点的 javascript 正在劫持并忽略事件。我试图从这些站点读取代码以查看发生了什么，但代码太多了。
Does anyone have any idea about what is happening here and how to fix it?
有没有人知道这里发生了什么以及如何解决它？
回答by Gone Coding
Due to browser extension sand-boxing, and basic jQuery functionality, you cannot trigger a non-jQuery click event with triggeror click.
由于浏览器扩展沙盒和基本的 jQuery 功能，您无法使用trigger或触发非 jQuery 单击事件click。
You can however call the raw DOM element clickmethod, which will act exactly as if the element was clicked with the mouse. Just use [0]to access the DOM element:
但是，您可以调用原始 DOM 元素click方法，该方法的行为与使用鼠标单击该元素时完全一样。仅用于[0]访问 DOM 元素：
$(css_selector)[0].click();
Although you would seldom need to, you can trigger all matching buttons using the same code in an each. As the thisin an eachis the DOM element it is quite simple:
尽管您很少需要这样做，但您可以使用each. 由于这在each是的DOM元素是很简单的：
$(css_selector).each(function(){
this.click();
});
回答by chnrxn
jQuery's click trigger function does not trigger a non-jQuery DOM click listener (jsfiddle.net/k2W6M).
jQuery 的点击触发功能不会触发非 jQuery DOM 点击侦听器 (jsfiddle.net/k2W6M)。
The jQuery documentation should really point out this fact. I'm sure more than a few people have gone on a wild chase over this.
jQuery 文档应该真正指出这一事实。我敢肯定，不少人都为此疯狂追逐过。
I was struggling with this same problem for a few days, trying to trigger an onclickhandler on a link with .click() and .trigger("click"), all in vain, until I saw this.
几天来，我一直在为同样的问题苦苦挣扎，试图在带有 .click() 和 .trigger("click") 的链接上触发onclick处理程序，直到我看到这一点，这一切都是徒劳的。
For the sake of having a complete answer to this question, dispatching a MouseEventto the element has the same effect as clicking the element. The following code worked for me, and should work when trying to click an element/link on a page from a content script:
为了对这个问题有一个完整的答案，向元素分派MouseEvent与单击元素具有相同的效果。以下代码对我有用，并且在尝试从内容脚本单击页面上的元素/链接时应该可以工作：
$(css_selector)[0].dispatchEvent(new MouseEvent("click"))
回答by magicdawn
content_script is sandboxed executed,see https://developer.chrome.com/extensions/content_scripts
content_script 被沙箱化执行，见https://developer.chrome.com/extensions/content_scripts
However, content scripts have some limitations. They cannot:
但是，内容脚本有一些限制。他们不可以：
- Use variables or functions defined by their extension's pages
- Use variables or functions defined by web pages or by other content scripts
- 使用由其扩展页面定义的变量或函数
- 使用由网页或其他内容脚本定义的变量或函数
$ in the content_script can't access $ on the webpage,but the events data stored inner $,so we could not trigger.
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 ];
