Chrome扩展中使用execCommand insertText后文本消失问题（附视频）

预期通过代码在输入框写入文本后触发回车键，但文本在回车键触发前就消失，推测是目标页面apollo.io的自定义DOM逻辑拦截了输入内容。

示例说明 #

示例视频（画质较差，但仍可看到问题现象）

涉及代码 #

function write(element, text) {
    const _el = element;
    _el.focus();
    document.execCommand('insertText', false, text); // 注：尽管execCommand在2020年被标记为废弃，但未来一段时间仍可正常使用——因为新的编辑API规范尚未完成，这类标准推进速度较慢，可能还需5-20年才会被彻底替代。
    _el.dispatchEvent(new Event('change', {bubbles: true})); // 通常无需此步骤
    const event = new KeyboardEvent('keydown', {
        key: 'Enter',
        code: 'Enter',
        which: 13,
        keyCode: 13,
    });
    _el.dispatchEvent(event);

    console.log("Wrote '", text, "' in =>", element);
}

解决方案 #

• 模拟真实用户输入流程：execCommand的非标准行为可能不被apollo.io的自定义编辑器兼容，改用直接设置输入框值并触发input事件的方式，同时增加延迟确保页面处理完文本后再触发回车：

  function write(element, text) {
      const _el = element;
      _el.focus();
      _el.value = text;
      // 触发input事件，通知页面内容更新
      _el.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
      // 延迟触发回车，避免页面未完成文本处理就执行回车
      setTimeout(() => {
          const enterEvent = new KeyboardEvent('keydown', {
              key: 'Enter',
              code: 'Enter',
              which: 13,
              keyCode: 13,
              bubbles: true,
              cancelable: true
          });
          _el.dispatchEvent(enterEvent);
          console.log("Wrote '", text, "' in =>", element);
      }, 100);
  }
  

• 排查页面事件拦截：通过浏览器开发者工具的「Event Listeners」面板，查看输入框绑定的keydown/input等事件，确认是否有自定义逻辑清空内容，针对性调整事件触发的类型或顺序。
• 监控DOM内容变化：若页面存在自动重置输入框的逻辑，可使用MutationObserver监听输入框的value属性变化，在内容被清空前重新写入文本并触发回车。

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