Skip to content

fix: migrate to chrome.debugger CDP for Turnstile compatibility#3

Merged
ancs21 merged 1 commit intomainfrom
fix/cdp-turnstile-compat
Apr 6, 2026
Merged

fix: migrate to chrome.debugger CDP for Turnstile compatibility#3
ancs21 merged 1 commit intomainfrom
fix/cdp-turnstile-compat

Conversation

@ancs21
Copy link
Copy Markdown
Owner

@ancs21 ancs21 commented Apr 6, 2026

Summary

  • Replace page-context monkey-patching (injected.js) with Chrome DevTools Protocol via chrome.debugger API — eliminates all page-context modifications that trigger Cloudflare Turnstile and similar anti-bot systems
  • Fix request tab scrolling for long content (closes Long content in Request tab get truncated and is not scrollable #1)
  • Default view to "Group by domain" for better DX

What changed

File Change
public/injected.js Deleted — no more page-context injection
public/content.js Stripped to DOM search/highlight only
public/background.js Rewritten to use CDP Network/Fetch/Runtime domains
public/manifest.json Added debugger permission, removed web_accessible_resources
src/sidepanel/App.tsx Added port lifecycle, debugger status indicator, breakpoint banner, default grouped view
src/sidepanel/components/detail/RequestDetail.tsx Fixed Request tab scroll overflow
CLAUDE.md Updated architecture docs

How it works

  • Network domain — passive capture of all XHR/Fetch requests with full response bodies
  • Fetch domain — intercepts requests only when mock or breakpoint rules are active
  • Runtime domain — captures console errors and unhandled exceptions
  • Port lifecycle — debugger attaches when side panel opens, detaches on close (minimizes yellow infobar exposure)

Tradeoffs

  • Chrome shows a yellow "debugging this browser" infobar when the debugger is attached — acceptable for a developer tool
  • Only Network, Fetch, Runtime CDP domains are used (no Runtime.evaluate) to limit blast radius

Test plan

  • Load extension, open side panel — yellow infobar appears, status dot turns green
  • Browse pages — requests appear in side panel grouped by domain
  • Visit a Cloudflare Turnstile-protected page — page loads normally (no challenge failure)
  • Create a mock rule — matching requests return mock response
  • Create a breakpoint rule — matching requests show pause banner in side panel, Continue/Cancel work
  • Close side panel — yellow infobar disappears
  • Open a request with large body — Request tab scrolls correctly
  • Console errors appear in the console tab

🤖 Generated with Claude Code

Plan: docs/plans/2026-04-06-001-fix-cloudflare-turnstile-compatibility-plan.md

…patibility

Replace page-context monkey-patching (injected.js) with Chrome DevTools Protocol
via chrome.debugger API. This eliminates all page-context modifications that
trigger Cloudflare Turnstile and similar anti-bot systems.

- Delete injected.js entirely; strip content.js to DOM search/highlight only
- Use CDP Network domain for passive request/response capture
- Use CDP Fetch domain for mock responses and breakpoint interception
- Use CDP Runtime domain for console error capture
- Add port-based side panel lifecycle (attach on open, detach on close)
- Add debugger status indicator and breakpoint notification banner in side panel
- Fix scrolling in Request tab for long content (closes #1)
- Default view mode to "Group by domain" for better DX

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@ancs21 ancs21 merged commit 8d96d67 into main Apr 6, 2026
@ancs21 ancs21 deleted the fix/cdp-turnstile-compat branch April 6, 2026 03:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Long content in Request tab get truncated and is not scrollable

1 participant