Метод рендеринга реагирования обезьяны в расширении 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)

Не уверен, что это правильный способ обезьяны исправить метод, но мне также интересно, если это правильный подход к тому, что я пытаюсь достичь.

0 ответов

Другие вопросы по тегам