在JavaScript中模拟按键：Chrome扩展表单自动提交问题求助

当前代码的核心问题 #

1. 直接修改textarea.innerHTML：多数网站的表单会监听input/keyup等用户输入事件，修改innerHTML不会触发这类事件，导致页面无法识别内容已更新。
2. 使用废弃API：document.execCommand已被标准废弃，不应再用于文本插入操作。
3. 事件派发对象错误：把Enter按键事件派发给了document，而非当前聚焦的textarea，且只触发了keydown，缺少完整的按键事件序列（部分表单需要keydown→keypress→keyup才能识别）。

修正后的可行方案 #

方案1：正确模拟Enter按键提交（针对textarea）

function autoSubmitTextarea(textarea) {
  // 聚焦并设置内容，优先用value而非innerHTML（表单控件的标准值属性）
  textarea.focus();
  textarea.value = "Hey! Our team has been OBSESSING over your page and we’d love to collab! 😁\nWe’ve done over $40M on Amazon and one of our best affiliates generated $100k in profit!\n\nWe have over 20,000 units in stock, and would love to build a long term relationship with you.\n\nRequest a sample from the listing and we’ll get it dispatched ASAP";
  
  // 触发输入事件，模拟真实用户输入行为
  textarea.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
  textarea.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));

  setTimeout(() => {
    textarea.focus(); // 确保焦点未丢失
    
    // 模拟完整的Enter按键事件序列
    const eventTypes = ['keydown', 'keypress', 'keyup'];
    eventTypes.forEach(type => {
      const event = new KeyboardEvent(type, {
        key: 'Enter',
        keyCode: 13,
        which: 13,
        bubbles: true,
        cancelable: true,
        view: window
      });
      textarea.dispatchEvent(event);
    });
  }, 1000); // 延迟按需调整，无需设置10秒这么久
}

方案2：直接调用发送按钮的click事件（更稳定）

如果能定位到页面的发送按钮，直接触发click通常比模拟按键更可靠：

function autoSubmitViaButton(textarea) {
  // 先设置textarea内容并触发输入事件
  textarea.focus();
  textarea.value = "你的文本内容";
  textarea.dispatchEvent(new Event('input', { bubbles: true }));
  
  setTimeout(() => {
    // 替换成页面实际的发送按钮选择器，比如'.send-button'或'[data-action="send"]'
    const sendBtn = document.querySelector('button[type="submit"]');
    if (sendBtn) {
      // 模拟真实鼠标点击事件
      const clickEvent = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window,
        button: 0
      });
      sendBtn.dispatchEvent(clickEvent);
    }
  }, 1000);
}

额外注意事项 #

• 部分网站有防机器人校验，可能需要先模拟鼠标移动、页面点击等前置交互再执行提交。
• Chrome内容脚本中执行时，确保目标元素已加载完成，可通过MutationObserver监听元素出现，或在DOMContentLoaded事件后执行。
• 避免直接操作innerHTML修改表单控件内容，所有表单控件的提交值都由value属性控制。

内容的提问来源于stack exchange，提问作者Spencer