Chrome扩展event.target.innerHTML无法修改Facebook评论框内容求助

Facebook的评论框基于React这类前端框架构建，直接修改DOM（比如innerHTML）只会临时生效——框架会通过内部状态同步覆盖DOM变化，导致内容自动恢复。以下是无需Facebook授权的解决办法：

方法一：模拟真实输入触发框架状态更新 #

这是最稳定的方案，通过模拟用户输入流程，让Facebook的前端框架感知到内容变化并同步更新内部状态，避免被回滚：

const target = event.target;
// 清空原有内容
target.textContent = '';
// 插入修正后的文本
const textNode = document.createTextNode(txt);
target.appendChild(textNode);
// 触发输入事件，通知框架更新状态
const inputEvent = new Event('input', { bubbles: true, cancelable: true });
const changeEvent = new Event('change', { bubbles: true, cancelable: true });
target.dispatchEvent(inputEvent);
target.dispatchEvent(changeEvent);

方法二：用MutationObserver拦截DOM回滚 #

通过监听评论框的DOM变化，当Facebook试图恢复原始文本时，立即重新设置修正后的内容。注意添加标记避免无限循环：

let isOurUpdate = false;
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (!isOurUpdate && mutation.target.innerHTML !== txt) {
      isOurUpdate = true;
      mutation.target.innerHTML = txt;
      isOurUpdate = false;
    }
  });
});

const target = event.target;
// 监听文本节点和子元素变化
observer.observe(target, { childList: true, subtree: true, characterData: true });

// 初始化设置修正内容
isOurUpdate = true;
target.innerHTML = txt;
isOurUpdate = false;

方法三：直接操作框架内部状态（不稳定） #

部分前端框架会将组件实例挂载到DOM元素的私有属性上，可尝试修改对应状态，但Facebook随时可能调整内部结构，该方法仅作临时参考：

const target = event.target;
// 尝试获取React组件实例（属性名可能随FB更新变化）
const reactInstance = target.__reactInternalInstance$ || target._reactRootContainer?._internalRoot?.current;
if (reactInstance?.stateNode?.setState) {
  // 根据实际情况调整state字段名
  reactInstance.stateNode.setState({ text: txt });
}

注意事项 #

• 优先使用方法一，符合前端框架的设计逻辑，不易触发限制机制
• 方法二可能出现内容闪烁，且频繁监听DOM会带来轻微性能损耗
• 方法三依赖Facebook内部实现，兼容性差，不建议长期使用

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