React元素触发点击：插件代码无法获取__reactProps属性的问题

差异原因 #

• 浏览器控制台代码运行在页面自身的JS上下文，和目标网站的React处于同一个环境，能直接读取React挂载到DOM元素上的内部私有属性（如__reactProps、__reactEventHandlers）。
• 浏览器插件的默认JS（content script）运行在扩展隔离上下文，这是浏览器为插件提供的独立环境，和页面的JS环境完全隔离，无法直接访问页面上下文里DOM元素的私有属性——这些属性是页面环境中React添加的，隔离上下文看不到。

解决方法 #

要访问页面上下文的React内部属性，必须将代码注入到页面自身的上下文执行，具体实现方式是在content script中动态创建<script>标签并插入到页面：

示例代码（插件content script） #

// 插件的content-script.js文件内容
function injectClickScript() {
  const script = document.createElement('script');
  script.textContent = `
    // 这个函数会在页面上下文执行
    function clickReactElement(elem) {
      if (!elem) return;
      const clickEvent = new Event('click', { bubbles: true, cancelable: true });
      elem.dispatchEvent(clickEvent);
      // 遍历DOM元素的属性，匹配React相关的内部属性
      for (const key in elem) {
        if (key.startsWith('__reactProps') || key.startsWith('__reactEventHandlers')) {
          if (typeof elem[key].onClick === 'function') {
            elem[key].onClick(clickEvent);
          }
        }
      }
    }

    // 示例：找到目标按钮并触发点击
    // const targetButton = document.querySelector('button[data-testid="submit-btn"]');
    // if (targetButton) clickReactElement(targetButton);
  `;
  document.head.appendChild(script);
  script.remove(); // 插入后可移除标签，不影响代码运行
}

injectClickScript();

注意事项 #

• React的__reactProps、__reactEventHandlers属于内部私有属性，没有官方API保证兼容性，不同React版本（尤其是React 18+）可能会更改属性名或存储方式，使用时需注意版本适配。
• 优先尝试标准的用户交互模拟方式，比如elem.click()或dispatchEvent触发原生事件，只有当这些方法无法触发React的点击逻辑时，再使用访问内部属性的方式。

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