使用 JavaScript 在 Instagram DM 的 Div 元素中模拟按键

Question

我正在开发一个 JavaScript 项目，我需要在 Instagram 直接消息中模拟在消息框中输入内容。但是，消息框不是标准输入或 textarea 元素，而是 contenteditable="true" 的 div。我尝试在此 div 上模拟按键但没有成功。

这是我迄今为止尝试过的：

模拟焦点元素上的按键：我尝试将键盘事件分派到当前焦点元素（div 消息框），希望模拟打字。然而，这个方法并没有达到预期的效果。这是代码片段：

function typeTextLikeHuman(text, delay = 100) {
    let index = 0;
    let focusedElement = document.activeElement;

    function typeChar() {
        if (index < text.length) {
            const char = text.charAt(index);
            const keyEvent = new KeyboardEvent('keydown', {
                key: char,
                bubbles: true,
                cancelable: true,
            });
            focusedElement.dispatchEvent(keyEvent);

            // Directly append the char for contenteditable divs
            if (focusedElement.isContentEditable) {
                focusedElement.textContent += char;
            }

            index++;
            if (index < text.length) {
                setTimeout(typeChar, delay);
            }
        }
    }

    typeChar();
}

// Usage
typeTextLikeHuman('Your message here', 100);

XPath 选择：我也尝试使用 XPath 选择 div，但没有成功。元素的 XPath 似乎是正确的，但 document.evaluate 找不到它。

主要问题似乎是如何有效地模拟 Instagram DM 中使用的 contenteditable div 中的输入。我正在寻找解决方案或解决方法：

模拟在内容可编辑的 div 中输入内容，其行为类似于 Instagram DM 消息框。 了解为什么当前方法在这种情况下可能不起作用。 寻找在这种环境中自动打字的任何替代方法。 任何建议或见解将不胜感激！

Answer 1

我认为问题在于你如何触发它。

这有效

window.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('click', (e) => {
    const tgt = e.target;
    if (tgt.matches('div[contenteditable]')) typeTextLikeHuman('Your message here', 100);
  });
});

function typeTextLikeHuman(text, delay = 100) {
  let index = 0;
  let focusedElement = document.activeElement;

  function typeChar() {
    if (index < text.length) {
      const char = text.charAt(index);
      const keyEvent = new KeyboardEvent('keydown', {
        key: char,
        bubbles: true,
        cancelable: true,
      });
      focusedElement.dispatchEvent(keyEvent);

      // Directly append the char for contenteditable divs
      if (focusedElement.isContentEditable) {
        focusedElement.textContent += char;
      }

      index++;
      if (index < text.length) {
        setTimeout(typeChar, delay);
      }
    }
  }

  typeChar();
}

<div contenteditable>Hello</div>