Метод рендеринга реагирования обезьяны в расширении devtools
Я пытаюсь создать обезьянький патч для метода рендеринга React из расширения devtool, потому что я пытаюсь воссоздать что-то похожее на api response_devtool для функции в моем расширении. Я подделываю виртуальный DOM проверяемого окна этими двумя строками кода
var reactRoot = document.querySelector("[data-reactroot]")
var dom = reactRoot[Object.getOwnPropertyNames(reactRoot)[0]]
Я также слышал о доступе к нему таким же образом, получая доступ к окну __REACT_DEVTOOLS_GLOBAL_HOOK__
, Мне нужно иметь доступ к новому набору данных из внутреннего экземпляра React в любое время, когда происходит обновление страницы (setState/rerender).
Это моя попытка исправления метода рендеринга в React. Этот код выполняется из отдельного файла, введенного через мой content-scripts.js
который может получить доступ к домену приложения React в проверенном окне.
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)
Не уверен, что это правильный способ обезьяны исправить метод, но мне также интересно, если это правильный подход к тому, что я пытаюсь достичь.