类似Grammarly的扩展修改Facebook/Twitter可编辑div内容后按键失效求解

问题现象 #

开发类似Grammarly的浏览器扩展时，在适配Facebook、Twitter发帖输入框的错词替换功能时出现异常：通过JavaScript修改DOM完成错词替换后，输入框的退格、删除等所有按键均无响应，该问题仅在上述两个平台出现。

问题复现 #

打开Facebook或Twitter的发帖对话框，在浏览器开发者控制台执行以下代码即可复现：

document.activeElement.innerText="hello, world"

根因分析 #

Facebook、Twitter的发帖输入框为受控contenteditable元素，前端框架（React或自研框架）会维护输入内容的内部状态，所有用户输入操作都会被框架监听并同步内部状态与DOM内容。直接修改innerText等DOM属性的操作会绕开框架的事件监听逻辑，导致框架内部状态与实际DOM内容不一致，后续的按键事件被框架逻辑拦截处理时出现异常，最终表现为按键无响应。

Grammarly核心实现逻辑 #

Grammarly不会直接修改DOM属性更新输入内容，核心逻辑如下：

• 操作前先获取输入框当前的选区范围，记录光标/选中区域位置
• 调用原生的document.execCommand API执行文本插入/替换操作，该操作会触发浏览器默认的beforeinput、input等事件，平台框架可以正常捕获到内容变化并同步内部状态
• 操作完成后恢复选区位置，保证用户输入体验连贯
• 部分场景下会注入透明的交互覆盖层辅助事件监听，不会破坏原平台的事件处理链路

可行解决思路 #

• 优先使用document.execCommand实现文本替换：
  1. 选中需要替换的错词区域，可通过Range、Selection API实现选区定位
  2. 执行document.execCommand('insertText', false, '替换后的正确文本')完成替换，该操作会自动触发所有原生输入事件，无需额外手动分发
• 若浏览器环境禁用了execCommand，可采用手动触发事件的方案：
  1. 通过Range API修改DOM内容，同时记录光标位置
  2. 手动构造并分发原生InputEvent事件，设置bubbles: true、cancelable: true、inputType对应操作类型（如insertReplacementText），让平台框架感知到内容变化并同步内部状态
  3. 操作完成后通过Selection API恢复光标位置
• 禁止直接修改innerText、innerHTML、textContent等DOM属性，所有内容修改操作都要保证能触发原平台的事件监听逻辑

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