Dev.to
7/16/2026

The original headline is "5 Things I Learned Building a Chrome Extension That Watches ChatGPT, Claude & Gemini"
Original: 5 Things I Learned Building a Chrome Extension That Watches ChatGPT, Claude & Gemini
Short summary
A developer shares hard-won lessons from building a Chrome extension that detects HTML code blocks in ChatGPT, Claude, and Gemini and deploys them live. Key insights: debounce on DOM stability rather than presence, match structural patterns instead of class names, score candidate code blocks to reduce false positives, sandbox iframes explicitly, and never route user credentials through your own backend. Practical engineering advice for anyone building on top of AI chat UIs.
- •Debounce MutationObserver on DOM stability (600ms) rather than tag presence for streaming UIs
- •Match structural HTML patterns instead of fragile CSS class names that change with every frontend update
- •Never route user credentials through your backend; handle uploads directly between extension and host
Generated with AI, which can make mistakes.
Is this a good recommendation for you?



