ReactDOM in Chrome Extension

I need a Chrome browser extension which reads from the ReactDOM of a given website. Using the [login to view URL] page as an example, when you load the main page in Chrome with the react developer tools enabled ([login to view URL]) you will see the react dom being loaded (figure 1). In this case I have highlighted the element FrontPagePromoBanner, and it has a set of props shown on the right hand side (e.g. location, naptime, pending, promoUnits). I need an example chrome plugin which can load this reactdom from the page the user is on and return a set of props for a given element. Ideally it would return state information as well. It is possible for a chrome plugin to get access to the reactdom using the following: var a; var React; function foo (data) { a=data; $("body").append("<div id='test'>" + [login to view URL](data) +"<\/div>"); }; window.__REACT_DEVTOOLS_GLOBAL_HOOK__={}; window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject=foo; But I don't know how to traverse the reactdom (or query it) looking for elements which are non-html-dom elements. The project must be well documented, explaining each step and giving a few examples of how to find props of reactdom elements.