monkey-patching react的devtools扩展中的render方法

Question

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

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

我也听说过通过访问窗口的__REACT_DEVTOOLS_GLOBAL_HOOK__以相同的方式访问它。我需要能够在页面更新（setState / rerender）的任何时候从React的internalInstance访问一组新数据。

这是我尝试猴子修补React的渲染方法。此代码从通过我的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
  }
})(reactRender)

不确定这是否是修补方法的正确方法，但我也想知道这是否是我正在尝试完成的正确方法。