Back to feed
Dev.to
Dev.to
7/16/2026
The original headline is "5 Things I Learned Building a Chrome Extension That Watches ChatGPT, Claude & Gemini"

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?

Comments

Failed to load comments. Please try again.

Explore more