小编Gra*_*ant的帖子

我正在尝试从 devtool 扩展中为 React 的渲染方法创建一个猴子补丁，因为我正在尝试为我的扩展中的一个功能重新创建类似于 react_devtool 的 api 的东西。我用这两行代码欺骗了被检查窗口的虚拟 DOM

var reactRoot = document.querySelector("[data-reactroot]")
var dom = reactRoot[Object.getOwnPropertyNames(reactRoot)[0]]

我还听说通过访问窗口的__REACT_DEVTOOLS_GLOBAL_HOOK__. 我需要能够在页面更新时从 React 的 internalInstance 访问一组新数据（setState/rerender）。

这是我对 React 的渲染方法进行猴子修补的尝试。此代码从通过 my 注入的单独文件运行，该文件content-scripts.js能够在检查的窗口中访问 React 应用程序的 dom。

const reactInstances = window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers
const instance = reactInstances[Object.keys(reactInstances)[0]]
console.log('current windows React INSTANCE: ', instance)
var reactRender = instance.Mount.render
console.log('reacts render method: ', reactRender)
reactRender = (function (original) {
  return function (nextElement, container, callback) {
    var result = original.apply(this, arguments)
    console.log(original, result)
    return result
  } …