Search code examples
javascriptreactjsuserscripts

Userscript to simulate click on react managed button

I want to write a userscript for Tampermonkey, i.e. in vanilla JavaScript. The userscript shall simulate a click on the "Paste Text" button on the website https://quillbot.com/summarize. This button is a React-managed <div>.

I tried using the .click() method of the div, but nothing happens.

Solution

  • "Paste Text" button, of course, uses some way to interact with the clipboard. From its behavior, it seems that they use the Clipboard API, with the corresponding user-granted permission.

    Unfortunately, it's not possible to trigger interaction with the clipboard without a user interaction. Quote from relevant answer:

    Don't expect clipboard related commands to work whilst you are testing code in the console. Generally, the page is required to be active (Async Clipboard API) or requires user interaction (e.g. a user click) to allow (document.execCommand('copy')) to access the clipboard see below for more detail.

    As such, when you try to .click() the "Paste Text" button (you've probably been using the wrong div in the tree):

    const clickablePasteText = document.querySelector("#inputGridContainerRef > div.MuiGrid-root.MuiGrid-container.css-1tze8m4 > div > div > div");
clickablePasteText.click();

    ... you'll get an error message "Paste permission denied!" native to the website – it seems to assume that any exception thrown is caused by a missing permission:

    demonstration of error message "Paste permission denied!"

    but it is actually the browser complaining that the call to the API came without a valid user-triggered event. For example, Firefox throws an error:

    Uncaught (in promise) DOMException: Clipboard write was blocked due to lack of user activation.