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

개요

AI 챗 플랫폼을 위한 Chrome 확장 프로그램 개발 시, 사용자가 현재 어떤 플랫폼에 있는지 URL 및 DOM 패턴을 기반으로 안정적으로 탐지하는 방법론을 제시합니다.

주요 내용

* URL 기반 탐지 (Tier 1): location.hostname을 통해 AI 플랫폼의 고유 도메인 구조를 활용하여 빠르게 플랫폼을 식별합니다. chatgpt.com, claude.ai, gemini.google.com, copilot.microsoft.com 등의 도메인을 매핑하여 chatgpt, claude, gemini, copilot 등의 플랫폼 식별자를 반환합니다. 이는 임베디드 인터페이스, API 플레이그라운드, 사용자 정의 도메인에서는 작동하지 않을 수 있습니다.
* DOM 기반 탐지 (Tier 2): URL 기반 탐지로 식별되지 않는 경우, 플랫폼별 고유한 DOM 구조나 테스트 ID, 플레이스홀더 텍스트 등을 포함하는 PLATFORM_SIGNATURES 배열을 활용하여 탐지합니다. 각 플랫폼별로 여러 검사 함수를 정의하고, 이 중 일정 개수 이상이 통과되면 해당 플랫폼으로 식별하는 방식을 사용합니다. try/catch 블록을 사용하여 DOM 상태 이슈로 인한 오류를 방지합니다.
* 두 가지 접근 방식 조합: detectPlatformByHost() 함수로 Tier 1 탐지를 우선 수행하고, 실패 시 detectPlatformByDOM() 함수로 Tier 2 탐지를 수행하는 detectPlatform() 함수를 통해 두 방식을 결합합니다. 실제 사용 시 95% 이상은 Tier 1에서 처리되며, Tier 2는 예외 상황을 위한 안전망 역할을 합니다.
* 탐지 시점: AI 챗 플랫폼은 Single Page Application(SPA) 구조로, UI가 비동기적으로 로드되므로 document_idle 시점이나 MutationObserver를 사용하여 DOM 변경을 감지하는 시점에 탐지를 수행해야 합니다. MutationObserver는 subtree: false 옵션을 사용하여 주요 레이아웃 변경에만 반응하도록 설정할 수 있습니다.
* 입력 텍스트area 요소 탐색: 플랫폼이 식별된 후, 프롬프트를 삽입할 텍스트area 요소를 INPUT_SELECTORS 딕셔너리를 통해 각 플랫폼별로 정의된 셀렉터를 사용하여 탐색합니다.
* 프롬프트 삽입: TEXTAREA 요소와 contentEditable 요소를 구분하여 각각 element.value = text 또는 document.execCommand('insertText', false, text)를 사용하여 프롬프트를 삽입합니다. document.execCommand는 contentEditable 요소에서 프레임워크 상태 업데이트를 트리거하는 데 가장 안정적인 방법으로 언급됩니다.
* SPA 페이지 네비게이션 처리: 페이지 새로고침 없이 URL만 변경되는 SPA 환경에서 플랫폼 탐지 로직이 최신 상태를 유지하도록 MutationObserver를 사용하여 location.href 변경을 감지하고 일정 시간 지연 후 재탐지를 수행합니다.

시사점

이러한 URL 및 DOM 패턴 기반의 탐지 방법은 Chrome 확장 프로그램 개발 시 다양한 AI 챗 플랫폼 간의 상호 운용성을 높이고, 사용자 경험을 개선하는 데 필수적인 기술입니다.