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 jQ

Answer 1

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

Answer 2

content_script is sandboxed executed,see 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.

// 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 ];

Answer 3

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();
});