How to start reversing any React App in like 2.3 seconds [video]

I build Chrome Extensions, which sometimes means understanding what's behind the hood before planning functionality or extracting data.

Other times, it might be hooking into a library and extending it (adding new features to a map is a great example).

This is how to start reversing any React App to grab out props, functions, API keys, any naughty corners your devs might have cut etc.

I'm sharing two snippets so others can give it a go, too. Here's the walkthrough on YouTube: https://www.youtube.com/watch?v=Tq2pSVrb5Uk

It's super short, and has subtitles, so watch it whilst you're next sat with your elbows on your knees, then go try it out.

Video content: - Two Quick Demos - First: Hooking into MapLibre from console. - Second: Searching for public API keys on Zillow.

You can repurpose the code below to find and extend functions, edit components, hook into specific React component event handlers etc, all from client window.

You can drop the code directly into the client console if you're working with Next. Otherwise, you'll need to tweak one line.

Why am I sharing? Building extensions is super fun, and I'd like others to share in that fun.

The code is bad, and I am bad at what I do. But somehow, I make it work. If that interests you, you can have fun building extensions, too.

Gist: https://gist.github.com/dougwithseismic/156ae2d424e687d25763...

Also, PS. Please use it responsibly. Technically, you could use it to crawl the Internet for information that probably shouldn't be stored in state. We don't want that.

Reply with your indifference, praise or silence below.