Bookmarklet to simulate button click in a Google service iframe

1.1k views Asked by At

The goal is to add keyboard shortcuts to Google's Google Translator Toolkit. Most functions there have keyboard shortcuts, but these two don't.

The first function is called Merge Down. It fires correctly when this bookmarklet is executed:

javascript:document.evaluate("//div[(@id='gtc-merge-arent')]/div[(@class='modal-dialog
gtc-merge')]/div[(@class='modal-dialog-buttons')]/button[(text()='OK')]",    document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,
null).singleNodeValue.click();

The Apply to All function is trickier. Normally you have to click three times to execute this function:

#1 to click the button that makes visible the Repetitions dialog and sets the parameters: what to replace what with.
#2 to click 'Apply to all' and trigger the actual replacement throughout
#3 to hide the dialog element.

I don't want to mess with Google's internal code, so a normal click as if by mouse would be best.

#2 and #3 fire easily enough: same bookmarklet, with a pause:

javascript:(function(pause) { 
document.evaluate("//div[(@id='fnrDialogParent')]/div[(@class='modal-dialog gtc-rep-modal-dialog')]/div[(@class='modal-dialog-buttons')]/button[(text()='Apply to all')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.click();
setTimeout(() => document.evaluate("//div[(@id='fnrDialogParent')]/div[(@class='modal-dialog gtc-rep-modal-dialog')]/div[(@class='modal-dialog-buttons')]/button[(text()='Exit')]", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.click(), pause) 
            })(400);

I can't simulate a click on the Repetitions button, which is supposed to pop up with the two buttons I need to click to finish the job. The button itself is a div with an img inside an iframe. I tried most of the methods I found here for click simulation, the latest being this one, but it doesn't work all the same (the references are taken correctly)

var ifrm = document.querySelectorAll('iframe')[2];<br> 
$(ifrm).contents().find('img.jfk-button-img.gtc-img-rep').click();

(The button itself is a div with an img inside. Depending on whether a segment repeats elsewhere or not, the button is either -enabled or -disabled. Here's the HTML code for an enabled button:

<div role="button" class="goog-inline-block jfk-button jfk-button-standard jfk-button-narrow jfk-button-collapse-left jfk-button-collapse-right jfk-button-clear-outline" tabindex="0" id="goog-gtc-repbutton" aria-label="Repeated: 3" data-tooltip="Repeated: 3" style="user-select: none;"><img src="./images/cleardot.gif" class="jfk-button-img gtc-img-rep" style="width: 21px; height: 21px;"></div>
1

There are 1 answers

1
Dan On
javascript: (function() {
    const a = f => new MouseEvent(f, { bubbles: !0 }),
        b = f => () => document.querySelector(f).click(),
        c = f => `#fnrDialogParent .gtc-rep-modal-dialog .modal-dialog-buttons button[name=${f}]`,
        d = { imgSel: (f => () => {
                const g = a('mousedown'),
                    h = a('mouseup'),
                    i = document.querySelector(f);
                i.dispatchEvent(g), i.dispatchEvent(h) })('img.jfk-button-img.gtc-img-rep'), applyToAll: b(c('repDialogReplaceAll')), exit: b(c('repDialogExit')) };
    d.imgSel(), d.applyToAll(), d.exit() })();

This is the bookmarklet that answers my question and does the 3 clicks. This answer tipped me off.