0

I'm trying to create a Chrome Extension that changes the way a React app behaves. I want to patch a render function of a specific Component.

I thought that the best way would be to Patch the createElement function of React, and once I detect that the component that I want to change is being created, I will patch its render function with my own rendering.

The problem is that this application was built using webpack, and I don't have access to its React instance...

How can I get the React instance?

Thanks!

gilamran
  • 7,090
  • 4
  • 31
  • 50
  • I haven't done this myself but I know you need to run a **page script** ([more info](https://stackoverflow.com/a/9517879)) in your content script that's declared with [run_at:document_start](https://developer.chrome.com/extensions/content_scripts#run_time). In that page script you'll be able to do things like installing a debug hook for React, and so on. For more info try debugging/inspecting some existing extensions like "React Developer Tools". – wOxxOm Aug 07 '19 at 15:48
  • Hi mate, take a look at how react-dev-tools are implemented: https://github.com/facebook/react-devtools – Mosè Raguzzini Aug 07 '19 at 15:48
  • The react-devtools are using a global variable (`__REACT_DEVTOOLS_GLOBAL_HOOK__`) that React code is reaching specifically, and providing the debug information – gilamran Aug 07 '19 at 15:57

0 Answers0