Chrome扩展开发：如何模拟真实用户输入以触发输入框绑定的全部事件

下面提供两种可落地的实现方案，覆盖不同使用场景：

方案1：原生DOM事件模拟（无额外权限要求，兼容性最好） #

完全按照真实用户输入的事件触发顺序构造并派发原生事件，可覆盖绝大多数普通网页的事件监听需求，不需要申请扩展特殊权限。

实现代码 #

async function simulateKeyboardType(inputElement, text, typeInterval = 100) {
  // 触发聚焦事件
  inputElement.focus();
  inputElement.dispatchEvent(new Event('focus', { bubbles: true }));

  for (const char of text) {
    // 逐个字符触发完整按键事件流
    const keyDownEvent = new KeyboardEvent('keydown', {
      key: char,
      code: `Key${char.toUpperCase()}`,
      keyCode: char.toUpperCase().charCodeAt(0),
      bubbles: true,
      cancelable: true
    });
    inputElement.dispatchEvent(keyDownEvent);

    const keyPressEvent = new KeyboardEvent('keypress', {
      key: char,
      code: `Key${char.toUpperCase()}`,
      keyCode: char.toUpperCase().charCodeAt(0),
      bubbles: true,
      cancelable: true
    });
    inputElement.dispatchEvent(keyPressEvent);

    // 处理React/Vue受控输入框的状态同步，普通输入框可直接替换为 inputElement.value += char
    const setValue = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
    setValue.call(inputElement, inputElement.value + char);

    const inputEvent = new InputEvent('input', {
      inputType: 'insertText',
      data: char,
      bubbles: true,
      cancelable: true
    });
    inputElement.dispatchEvent(inputEvent);

    const keyUpEvent = new KeyboardEvent('keyup', {
      key: char,
      code: `Key${char.toUpperCase()}`,
      keyCode: char.toUpperCase().charCodeAt(0),
      bubbles: true,
      cancelable: true
    });
    inputElement.dispatchEvent(keyUpEvent);

    // 模拟真实用户输入间隔，需要无间隔输入可设为0
    await new Promise(resolve => setTimeout(resolve, typeInterval));
  }

  // 输入完成后触发失焦、值变更事件，覆盖失焦触发的业务逻辑
  inputElement.dispatchEvent(new Event('change', { bubbles: true }));
  inputElement.dispatchEvent(new Event('blur', { bubbles: true }));
  inputElement.dispatchEvent(new Event('focusout', { bubbles: true }));
}

方案2：chrome.debugger API 模拟（100%还原真实输入，适合内部工具） #

调用Chrome DevTools协议的原生输入能力，完全由浏览器内核模拟用户输入行为，所有事件都会按原生逻辑触发，不需要手动构造事件，也不会出现框架兼容问题，仅适合内部团队自用的扩展。

前置配置 #

首先在扩展manifest.json中申请调试权限：

{
  "permissions": ["debugger"]
}

实现代码 #

async function simulateTypeWithDebugger(tabId, inputElement, text) {
  // 先聚焦输入框
  inputElement.focus();
  // 连接当前标签页调试器
  await chrome.debugger.attach({ tabId }, "1.3");
  // 调用内核原生输入方法
  await chrome.debugger.sendCommand({ tabId }, "Input.insertText", {
    text: text
  });
  // 断开调试器连接
  await chrome.debugger.detach({ tabId });
}

注意：该方案开启调试器时，浏览器顶部会显示「由调试程序控制」的提示条，不适合对外发布的扩展使用。

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