When you're debugging,
the answer appears before you ask.

Croma is a Chrome extension that watches what you're doing,
explains selected code, catches errors, monitors failing API calls,
and answers questions about whatever page you're on.

Elements
Console
Network
»
✕ TypeError: Cannot read properties app.js:42
of undefined (reading 'map')
at renderItems (app.js:42:18)
at App (app.js:23:5)
at commitHookEffectListMount
at commitPassiveMountOnFiber
39function renderItems(items) {
40  return items.map(item => (
41    <div key={item.id}>{item.name}</div>
42  ))
43}
44
45const items = data.items
46renderItems(items)
47
📌 ✕
· Error detected
TypeError: Cannot read properties (reading 'map')
data.items  is undefined. You're trying to call .map() on it.
Fix: Check that data and data.items exist before calling renderItems.
Explained
You're mapping over items to render a list of components. Add a guard clause or use optional chaining.
· API Request
GET /api/users 500 1.2s
Internal Server Error
The server threw an error. Check logs or add error handling.
· Ask Croma
Ask anything about this page…

Capabilities

Everything you'd ask Claude,
already answered

Code explain
Select any code on any page. The sidebar explains what it does, what it returns, and what to watch out for.
Error monitor
Console errors, runtime exceptions, and unhandled promise rejections are caught and diagnosed automatically on localhost.
Network inspector
Failing API calls (4xx/5xx) and slow requests over 1.5s are flagged with an explanation and a suggested fix.
Page Q&A
Ask anything about the page you're on — docs, GitHub repos, error pages, any site.
Anthropic + OpenAI
Use your own API key. Stored permanently in Chrome sync storage. Enter once, never again.
Shadow DOM isolated
The sidebar lives in a Shadow DOM — zero conflict with host page styles or scripts.

How it works

Up in 60 seconds

1
Add to Chrome
Click "Add to Chrome" above. One click — no account, no sign-up.
2
Get an API key
Grab a key from Anthropic or OpenAI. Either works.
3
Paste it once
Click the Croma icon in your toolbar, paste your key, save. Stored permanently in Chrome sync — never enter it again.
4
Select anything
Highlight code or text on any page. The sidebar appears automatically. That's it.

Story

Why I built this

I kept alt-tabbing to ChatGPT to explain stack traces I was already staring at. The error was right there on my screen. The fix was probably three sentences. And yet — copy, switch tab, paste, wait, read, switch back. Every single time.

So I built Croma. A Chrome extension that watches what you're doing and surfaces the answer before you've consciously decided to ask. It catches errors, explains code, monitors API calls — all in a sidebar that appears and disappears without breaking your flow.

Built in a weekend with Preact, CRXJS, and a lot of time in chrome://extensions. Read the full build post →

Start debugging faster

Free to install. Works with any Anthropic or OpenAI API key.

Add Croma to Chrome