6

我正在尝试从 devtool 扩展中为 React 的渲染方法创建一个猴子补丁，因为我正在尝试为我的扩展中的一个功能重新创建类似于 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 的渲染方法。此代码从通过 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
  }
})(reactRender)

不确定这是否是猴子修补方法的正确方法，但我也想知道这是否是我想要完成的正确方法。

4

0 回答 0