React渲染页面中Chrome扩展脚本触发Click事件失效求助

React基于合成事件（SyntheticEvent）系统处理交互，直接调用元素的click()方法或简单创建事件，会因isTrusted属性为false（真实用户操作该属性为true）被React的校验逻辑拦截。以下是可行的解决方法：

方法1：创建可信事件并分发 #

通过Event构造函数生成带有isTrusted: true的事件，调用元素的dispatchEvent触发，完全模拟真实用户操作：

• 触发按钮点击：

const sendBtn = document.querySelector('button[onclick*="sendData"]'); // 按实际页面选择器调整
const clickEvent = new MouseEvent('click', {
  bubbles: true,
  cancelable: true,
  view: window,
  isTrusted: true // 核心属性，通过React校验
});
sendBtn.dispatchEvent(clickEvent);

• 触发输入框keyUp事件：

const inputEl = document.querySelector('input[onkeyup]'); // 按实际页面选择器调整
const keyUpEvent = new KeyboardEvent('keyup', {
  bubbles: true,
  cancelable: true,
  view: window,
  key: 'Enter', // 按需设置目标按键
  isTrusted: true
});
inputEl.dispatchEvent(keyUpEvent);

方法2：直接调用React组件的回调函数 #

若能获取到React组件实例，可直接调用绑定的方法：

1. 在Chrome开发者工具Elements面板选中目标元素，控制台输入$r获取对应组件实例
2. 直接调用方法：$r.sendData()
3. 在content script中，可通过元素的React内部属性获取实例（属性名需匹配页面React版本，React 17+多为__reactProps$xxx格式）：

const sendBtn = document.querySelector('button[onclick*="sendData"]');
const reactInstance = sendBtn.__reactProps$abc?.onClick?.__owner?.stateNode; // 替换abc为页面实际后缀
reactInstance?.sendData();

方法3：模拟完整交互流程 #

模拟从鼠标进入到点击释放的全流程，进一步贴近真实操作：

const sendBtn = document.querySelector('button[onclick*="sendData"]');
sendBtn.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true, isTrusted: true }));
sendBtn.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, isTrusted: true }));
sendBtn.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, isTrusted: true }));
sendBtn.dispatchEvent(new MouseEvent('click', { bubbles: true, isTrusted: true }));

不同React版本的校验逻辑略有差异，优先推荐方法1，它最契合React的事件处理机制。

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