Issue calling element.click() from extension

[Patrik Túri]

Hello developers,

In my extension the content script clicks a button in the page when I press a shortcut.

The website uses React.

After loading the page, my extension can't click a button in the React app, nothing happens.

However, if I manually click inside the React app the first time, then the extension can click the button and the button reacts.

I tried clicking on the React app first from the extension and then clicking the button, but it doesn't work. Also tried calling focus() on the element.

Any tips how could I fix this?

[ilyaigpetrov]

Please, show us a snippet of code where you click the button -- how do you do this: via `element.click()` or some other way?

My guess is that content script events are not catchable inside scripts of a web site because content scripts work in insulation from page scripts.

But you have to experiment yourself to prove this guess. If it is true then you can try using puppeteer, useful information may be found in this ticket: https://github.com/puppeteer/puppeteer/issues/6058.

[Patrik Túri]

Yes I use element.click(), here is a simplified version of my content script:

https://gist.github.com/patrikturi/0ed41f97fd8d7768663d018c1262e892

> My guess is that content script events are not catchable inside scripts of a web site because content scripts work in insulation from page scripts.

If this was true, my script would not work at all. But it works after I manually click inside the React app first.

[Patrik Túri]

I found this to be working well:

const event = new Event('click', { bubbles: true, cancelable: true });

element.dispatchEvent(event);

React puts the event listener on the root element, so the event has to be propagated.