Chrome扩展修改React页面输入框值的非废弃解决方案求助

问题核心 #

React受控组件的状态更新依赖自身事件系统，直接修改DOM的value属性不会触发React的状态同步——普通模拟事件可能因缺少React要求的事件细节，无法被其合成事件系统正确捕获，导致失焦后输入框恢复原值。

替代document.execCommand的可行方案 #

方案1：构造完整可信的InputEvent模拟真实输入 #

React对input事件的处理依赖inputType、data等细节，模拟完整的用户输入流程（聚焦→清空→插入文本）更易被识别：

function setReactInputValue(input, targetValue) {
  // 聚焦输入框，模拟用户操作起点
  input.focus();

  // 选中原有内容并模拟删除操作
  input.setSelectionRange(0, input.value.length);
  const deleteEvent = new InputEvent('input', {
    bubbles: true,
    cancelable: true,
    inputType: 'deleteContentBackward',
    data: '',
    isTrusted: true // 标记为可信事件，避免被React过滤
  });
  input.dispatchEvent(deleteEvent);

  // 设置新值并触发插入文本事件
  input.value = targetValue;
  const insertEvent = new InputEvent('input', {
    bubbles: true,
    cancelable: true,
    inputType: 'insertText',
    data: targetValue,
    isTrusted: true
  });
  input.dispatchEvent(insertEvent);

  // 可选：失焦触发change事件（适配依赖change更新的场景）
  input.blur();
  const changeEvent = new Event('change', { bubbles: true, cancelable: true });
  input.dispatchEvent(changeEvent);
}

// 使用示例
const field = document.querySelector('input[type="text"]');
setReactInputValue(field, 'new value');

方案2：直接调用React组件内部状态更新（依赖React版本） #

如果能获取输入框对应的React组件实例，可直接触发状态更新，这种方式更直接但需适配React版本：

function getReactInstance(element) {
  // React 16+ 通常使用带前缀的内部实例属性，需根据实际环境调整
  const reactInstanceKey = Object.keys(element).find(key => 
    key.startsWith('__reactInternalInstance$')
  );
  return element[reactInstanceKey];
}

function setReactInputValueDirectly(input, targetValue) {
  const instance = getReactInstance(input);
  if (!instance) return;

  // 调用React内部的状态更新方法
  instance.updater.enqueueSetState(instance, { value: targetValue });
  
  // 同步更新DOM并触发基础事件
  input.value = targetValue;
  input.dispatchEvent(new InputEvent('input', { bubbles: true }));
}

// 使用示例
const field = document.querySelector('input[type="text"]');
setReactInputValueDirectly(field, 'new value');

方案3：使用测试库模拟完整用户输入 #

借助@testing-library/user-event库（原本用于前端测试），它会自动模拟所有必要的用户交互事件，无需手动构造：

1. 安装库：

npm install @testing-library/user-event --save

2. 内容脚本中使用：

import userEvent from '@testing-library/user-event';

async function setInputValue(input, targetValue) {
  await userEvent.clear(input);
  await userEvent.type(input, targetValue);
}

// 使用示例
const field = document.querySelector('input[type="text"]');
setInputValue(field, 'new value');

关键注意事项 #

• 可信事件标记：React可能过滤非用户触发的事件，构造事件时尽量设置isTrusted: true（部分浏览器可能限制手动设置，此时优先用方案3）。
• 模拟真实流程：遵循聚焦→清空→输入的用户操作逻辑，比直接修改value+触发单一事件更可靠。
• 版本兼容性：直接操作React内部实例的方法会随React版本变化失效，优先选择模拟输入的方案。

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