monkey-patching react's render method in devtools extension

Question

I'm trying to create a monkey patch to React's render method from a devtool extension because I'm trying to recreate something similar to react_devtool's api for a feature in my extension. I'm spoofing the inspected window's virtual DOM with these 2 lines of code

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

I've also heard of accessing this in the same way by accessing the window's __REACT_DEVTOOLS_GLOBAL_HOOK__. I need to be able to access a new set of data from React's internalInstance anytime there is an update to the page (setState/rerender).

This is my attempt at monkey patching React's render method. This code is running from a separate file injected through my content-scripts.jswhich is able to access the dom of a React application in the inspected Window.

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)

Not sure if this is the correct way to monkey patch a method but I'm also wondering if this is the correct approach to what I'm trying to accomplish.

monkey-patching react's render method in devtools extension

0 Answers0