피드로 돌아가기
Dev.toFrontend
원문 읽기
Tiered Detection 전략을 통한 AI 플랫폼 식별 및 DOM 제어 자동화
Detecting Which AI Chat Platform You're On: URL and DOM Patterns for ChatGPT, Claude, Gemini, and Copilot
AI 요약
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 요소 제어 시 프레임워크 반응성 트리거 방식 검증