如何从Chrome扩展的content script修改React组件属性实现持久文本替换

云原生阿岚

2026-10-2

解决方案

你遇到的内容回退问题根因：React会将受控组件的内容存储在内部状态或props中，直接修改DOM不会同步到React内部状态，下次组件重渲染就会恢复为原有值。

方案1：模拟输入事件（优先推荐，兼容性更好）

不需要直接修改React内部属性，通过触发原生input事件通知React同步最新DOM内容即可解决回退问题，实现代码如下：

const editableElement = document.activeElement;
// 执行文本替换
editableElement.innerHTML = editableElement.innerHTML.replace("foo", "bar");
// 构造并触发原生input事件，让React自动同步DOM内容到内部状态
const inputEvent = new InputEvent('input', {
  bubbles: true,
  cancelable: true
});
editableElement.dispatchEvent(inputEvent);

方案2：直接修改React组件属性

可以通过content script访问DOM元素绑定的React内部节点修改属性，该方法依赖React未公开的内部API，不同React版本实现可能有差异：

首先编写工具函数获取DOM元素对应的React Fiber节点：

function getReactFiber(element) {
  // React会在DOM元素上挂载以__reactFiber$或__reactInternalInstance$开头的内部属性
  for (const key of Object.keys(element)) {
    if (key.startsWith('__reactFiber$') || key.startsWith('__reactInternalInstance$')) {
      return element[key];
    }
  }
  return null;
}

获取Fiber节点后，可通过memoizedProps获取组件当前props，memoizedState获取组件当前内部状态，修改对应内容字段后触发组件重渲染即可。如果是受控组件，内容一般由上层父组件维护，可通过Fiber节点的return属性向上遍历找到存储内容的父组件再修改对应属性。