Triggering a click event from content script - chrome extension

Question

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):

$(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:

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.

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.

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.

This seems to be issue because javascripts from those sites are hijacking and ignoring events. I tried to read code from these sites to see what is happening but there was simply too much code.

Does anyone have any idea about what is happening here and how to fix it?

Answer 1

Due to browser extension sand-boxing, and basic jQuery functionality, you cannot trigger a non-jQuery click event with trigger or click.

You can however call the raw DOM element click method, which will act exactly as if the element was clicked with the mouse. Just use [0] to access the DOM element:

$(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 this in an each is the DOM element it is quite simple:

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

Answer 2

jQuery's click trigger function does not trigger a non-jQuery DOM click listener (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.

I was struggling with this same problem for a few days, trying to trigger an onclick handler on a link with .click() and .trigger("click"), all in vain, until I saw this.

For the sake of having a complete answer to this question, dispatching a MouseEvent to 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:

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