Catch Your Assets on the Fly with Cat-Catch

Ever wondered exactly what your browser is loading behind the scenes? Not the network tab deep-dive, but a quick, visual list of every image, script, stylesheet, and font a page pulls in. That's where Cat-Catch comes in.

It's an open-source browser extension that acts like a resource sniffer for your current tab. Instead of digging through DevTools, you get a clean, filterable list of every asset the page requested, right as it happens. If you build scrapers, audit performance, or just like knowing what's under the hood of every site you visit, this feels like a cheat code.

What It Does

Cat-Catch lives in your browser toolbar. Click it on any page, and it scans all network activity for that tab, then groups everything by type: images, JavaScript, CSS, media, fonts, XHR/fetch calls, and more.

The key word here is filterable. You can instantly narrow down the list by asset type, search for a specific filename, or sort by size or load time. Want to see only the WebP images on a page? One click. Need to find that one lazy-loaded script that's slowing things down? Type its name. It turns a chaotic stream of requests into a tidy, inspectable list.

Why It's Cool

The browser's built-in network tab is powerful, but it's also overwhelming. Cat-Catch is the opposite: it's purpose-built for quick asset discovery. Here's what stands out:

• Zero config, instant results. Install it, click it, and you're done. No setup panels or permission gymnastics.
• Smart grouping and export. You can copy the full URL list or even download specific assets directly from the menu. If you're pulling references for a design mockup or gathering resources for a project, this saves an enormous amount of clicking.
• Handles modern web stuff. It picks up blob: URLs and data URIs, which most simple sniffers miss. That's a nice touch if you're dealing with canvas-based or streamed content.
• Open source and transparent. The code is right there on GitHub. If you want to see how it hooks into browser APIs or just want to audit exactly what the extension does with your data, you can.

Realistically, it shines for quick reconnaissance. If I'm looking at a competitor's site and want to know what image CDN they use, or if I need to grab a font file for offline testing, this is my first stop before opening DevTools.

How to Try It

You can grab it directly from your browser's extension store. The project links to both Chrome Web Store and Firefox Add-ons.

If you prefer to run it from source or just want to poke around the code, clone it from the repo:

git clone https://github.com/xifangczy/cat-catch.git

Then load the extension folder as an unpacked extension via chrome://extensions (or about:debugging for Firefox). The README has clear instructions.

Final Thoughts

Cat-Catch won't replace DevTools for serious debugging, but it wasn't meant to. It fills a specific gap: giving you a readable, searchable inventory of page assets in two seconds. For frontend devs, designers pulling references, or anyone doing lightweight security/performance checks, it's a genuinely handy tool to keep in the toolbar.

It's also a good example of a focused open-source utility. Not every project needs to be a framework. Sometimes a well-built, single-purpose tool is exactly what the ecosystem needs.

Found this useful? Follow @githubprojects for more open-source finds.