Chrome 扩展（内容脚本）+ React：从 DOM 获取 React 组件？

Posted 2023-02-16

【中文标题】Chrome 扩展（内容脚本）+ React：从 DOM 获取 React 组件？

【英文标题】：Chrome Extension (content script) + React: getting React component from DOM?

【发布时间】：2017-02-17 07:18:34

【问题描述】：

我了解，有一个 chrome 扩展“React Dev Tools”可以检查 React 应用程序。想知道，是否可以从网页上注入的 Chrome 扩展内容脚本中读取 React 组件对应的 props。

例如$('.todo-list').react.props ??

【问题讨论】：

^ 问题主要是获取 React Node 的引用，所以可以访问 props

欺骗 React.render 并分配属性：React - getting a component from a DOM element for debugging

【参考方案1】：

如果你不能欺骗或暴露 React 内部，另一种访问 React 节点的方法是这样的：

const root = document.querySelector('[data-reactroot]');
const instance = root[Object.keys(root)[0]];

这将为您提供一个在 _currentElement 键中具有根 React 元素的对象。