在 Gmail 上，为什么不能用 javascript 单击 "To" 字段？

Question

我正在构建一个可帮助电机控制受限的人写电子邮件的辅助工具，因此我需要“收件人”字段（Gmail 撰写中的第一个字段 window）的编程重点。

我在 Chrome devtools 面板、textarea 元素及其父元素上尝试了以下各种组合。似乎没有什么能让它集中注意力。

setTimeout(() => {
    let el = document.querySelector('*[name="to"]');
    el.dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));
    el.dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
    el.focus();
    el.dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
    el.click();
    console.log('done')
}, 5000)

这是相关标记的示例：

<div class="wO nr l1" style="">
    <input class="wA" tabindex="-1" aria-hidden="true">
    <textarea rows="1" id=":bw" class="vO" name="to" spellcheck="false" autocomplete="false" autocapitalize="off" autocorrect="off" tabindex="1" dir="ltr" aria-label="To" role="combobox" aria-autocomplete="list" style="width: 380px;"></textarea>
    <div class="aA6">
        <span>
            <div tabindex="1" style="background-color: transparent; width: 1px; height: 1px; position: absolute;"></div>
            <div tabindex="1" style="background-color: transparent; width: 1px; height: 1px; position: absolute;"></div>
            <span><span id=":8p" class="aB gQ pE" role="link" tabindex="1" data-tooltip="Add Cc recipients ‪(Ctrl-Shift-C)‬" aria-label="Add Cc recipients ‪(Ctrl-Shift-C)‬" style="user-select: none;">Cc</span><span id=":8o" class="aB  gQ pB" role="link" tabindex="1" data-tooltip="Add Bcc recipients ‪(Ctrl-Shift-B)‬" aria-label="Add Bcc recipients ‪(Ctrl-Shift-B)‬" style="user-select: none;">Bcc</span><span id=":aw" role="button" tabindex="1" aria-hidden="false" class="bcV Sz" style="display:none" data-tooltip="Some recipients use services that don't support encryption (click for details)" aria-label="Some recipients use services that don't support encryption (click for details)"></span></span><div tabindex="1" style="background-color: transparent; width: 1px; height: 1px; position: absolute;">
            </div>
        </span>
    </div>
</div>

Answer 1

当没有聚焦时，Gmail 撰写中的“收件人”、“抄送”和“密件抄送”字段 window 会被另一个标记为“收件人”的字段覆盖：

这个“收件人”字段有一个自动隐藏它的焦点事件处理程序，显示“收件人”、“抄送”和“密件抄送”字段并将焦点转移到其中之一。要以编程方式激活处理程序，您首先需要找到“收件人”字段并向其发送焦点事件。下面的代码在 Chrome 控制台上帮我解决了问题，尽管我怀疑我使用的 ID 可能不稳定：

let recipients = document.getElementById(':oa');  // not sure if this ID changes
recipients.dispatchEvent(new FocusEvent('focus'));

（在“收件人”/“抄送”/“密送”字段中输入至少一个 e-mail 地址后，“收件人”字段的外观会发生变化，隐藏标签并显示收件人收件人地址。但是，相同的代码似乎仍然可以激活焦点事件处理程序。）

Ps。具有焦点处理程序的节点的 ID 似乎确实发生了变化。我不确定如何可靠地找到它——HTML 代码确实没有提供太多可靠的选择器挂在上面：

<div id=":oa" class="aoD hl" tabindex="1" style="background-color: transparent;">
  <div id=":pm" class="oL aDm" style="">Recipients</div>
  <div id=":o7" class="bgW">
    <span id=":p0" role="button" tabindex="-1" aria-hidden="true" class="bcV Sz" style="display:none" data-tooltip="Some recipients use services that don't support encryption (click for details)" aria-label="Some recipients use services that don't support encryption (click for details)"></span>
  </div>
</div>

您可能不得不求助于 XPath 技巧来 locate it using the label text，像这样：

let recipients = document.evaluate("//div[text()='Recipients']/..", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

但即使这样也只有在还没有输入收件人时才有效（如果有任何收件人，“收件人”标签会被收件人列表替换），而且如果用户的界面语言不正确，它也可能会崩溃'英语。 :(

在 Gmail 上，为什么不能用 javascript 单击 "To" 字段？

On Gmail, why can't the "To" field be clicked with javascript?

html

javascript

gmail

google-chrome

google-chrome-devtools