피드로 돌아가기
Detecting Which AI Chat Platform You're On: URL and DOM Patterns for ChatGPT, Claude, Gemini, and Copilot
Dev.toDev.to
Frontend

Tiered Detection 전략을 통한 AI 플랫폼 식별 및 DOM 제어 자동화

Detecting Which AI Chat Platform You're On: URL and DOM Patterns for ChatGPT, Claude, Gemini, and Copilot

SHOTA2026년 6월 30일6intermediate

Context

AI 플랫폼별로 상이한 DOM 구조와 SPA 기반의 비동기 렌더링으로 인해 일관된 입력 제어 어려움 발생. 단순 Class/ID 매칭은 잦은 UI 업데이트에 따른 낮은 유지보수성 및 런타임 오류 유발 가능성 존재.

Technical Solution

  • Hostname 기반의 Tier 1 탐지 로직을 우선 적용하여 95% 이상의 요청에 대해 즉각적인 플랫폼 식별 수행
  • URL 식별 불가 케이스 대응을 위해 다중 시그니처 기반의 Tier 2 DOM 분석 및 Majority Vote 알고리즘을 통한 오탐지 방지
  • SPA 환경의 동적 UI 대응을 위해 MutationObserver 기반의 상태 감시 및 document_idle 시점의 스크립트 주입 설계
  • ContentEditable 요소의 프레임워크 상태 업데이트 보장을 위해 deprecated 되었으나 신뢰도가 높은 document.execCommand 활용
  • Shadow DOM 구조를 가진 Gemini의 rich-textarea 등 플랫폼별 특수 요소에 대응하는 전용 Selector 맵핑 구조 구축

1. URL 기반 고속 탐지 레이어 우선 배치

2. DOM 분석 시 ID/Class 대신 구조적 시그니처 및 Majority Vote 적용

3. SPA 상태 변경 감지를 위한 MutationObserver 범위 최적화(subtree 설정 주의)

4. ContentEditable 요소 제어 시 프레임워크 반응성 트리거 방식 검증

원문 읽기