含表情符号时Twitter AI推文生成浏览器扩展异常求助

你的问题核心在于Twitter的输入框基于Draft.js编辑器，它会维护一套独立的内部状态（ContentState），而你当前直接修改DOM的innerHTML的方式，并没有同步更新Draft.js的内部状态，导致界面显示和实际可提交内容不一致——尤其是当输入框存在表情时，Draft会将表情渲染为独立的DOM节点，直接替换span内容会破坏原有结构的状态关联。

解决方案：放弃直接DOM操作，模拟用户真实输入 #

最可靠的方式是模拟用户的正常输入行为，让Draft.js自动处理内部状态同步，以下是修改后的代码：

function setTwitterInputText(aiGeneratedText: string) {
  // 获取Draft编辑器的核心区块元素
  const editorBlock = document.querySelector('.public-DraftStyleDefault-block.public-DraftStyleDefault-ltr');
  if (!editorBlock) return;

  // 先聚焦输入框，确保编辑器处于可交互状态
  editorBlock.focus();

  // 使用浏览器原生命令插入文本，Draft会自动同步内部状态
  document.execCommand('insertText', false, aiGeneratedText);

  // 触发input事件，确保界面和相关监听逻辑更新
  editorBlock.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
}

为什么这个方案有效？ #

• document.execCommand('insertText') 会触发contenteditable元素的原生输入流程，Draft.js会监听这个流程并自动更新自己的ContentState，无论输入框里是纯文本还是表情，都能正确处理内容整合。
• 避免了手动修改DOM带来的状态不一致问题，从根源上解决了“文本仅选中可见、发布后消失”的问题。

备选方案：直接操作Draft.js内部状态（风险较高） #

如果你需要更精细的控制，可以尝试直接操作Draft.js的ContentState，但这个方法依赖Twitter的具体实现，可能随着Twitter的更新失效：

function setTwitterInputText(aiGeneratedText: string) {
  const editableElement = document.querySelector('[contenteditable="true"]');
  if (!editableElement) return;

  // 获取Twitter挂载的Draft编辑器实例（实现可能变化）
  const editorInstance = editableElement._internalEditor;
  if (!editorInstance) return;

  const currentState = editorInstance._latestEditorState;
  const contentState = currentState.getCurrentContent();
  const selectionState = currentState.getSelection();

  // 在当前光标位置插入AI生成文本
  const newContentState = DraftModifier.insertText(
    contentState,
    selectionState,
    aiGeneratedText,
    null,
    null
  );

  // 更新编辑器状态
  editorInstance.update(DraftEditorState.push(currentState, newContentState, 'insert-characters'));
}

注意事项 #

• 优先使用第一种方案，兼容性和稳定性更强，不受Twitter前端实现变更的影响。
• 测试时覆盖多种场景：空输入框、已有纯文本、已有表情、文本+表情混合的情况，确保所有场景下文本都能正常显示和提交。

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