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.
I've 7+ years of web development experience with technologies like jQuery, JavaScript, HTML5.
I've prior experience of creating Chrome Extension.
Please message me to discuss on the same.
Hi I am new here but as you can check in my portfolio have worked a lot on browsers extension and developed browser extensions for dirt farmer game for [!] for chrome and firefox