javascript - 用于模拟 Google 服务 iframe 中按钮点击的 Bookmarklet

Question

目标是向 Google 的 Google 翻译工具包添加键盘快捷键。大多数功能都有键盘快捷键，但这两个没有。

第一个函数称为“Merge Down”。执行此小书签时它会正确触发:

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

“应用到全部”功能比较棘手。通常您需要点击三下才能执行此功能:

#1 单击按钮，使“重复”对话框可见并设置参数:用什么替换什么。
#2 点击“应用到全部”并触发实际替换
#3 隐藏对话框元素。

我不想弄乱 Google 的内部代码，因此最好像通过鼠标一样进行正常点击。

#2 和 #3 很容易触发:相同的书签，有一个暂停:

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

我无法模拟单击“重复”按钮，该按钮应该会弹出我需要单击才能完成工作的两个按钮。按钮本身是一个 div，在 iframe 内有一个 img。我尝试了我在这里找到的大多数点击模拟方法，最新的是this one ，但它并不完全一样(引用正确)

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

(按钮本身是一个 div，里面有一个 img。根据片段是否在其他地方重复，按钮可以启用或禁用。以下是启用按钮的 HTML 代码:

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

Answer 1

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

这个小书签可以回答我的问题并单击 3 次。 This answer tipped me off .