MutationObserver와 Local JSON 기반의 Zero-Latency 비자 정보 오버레이 구현

I Built a Visa Requirement Overlay for Google Flights — Here's How the Chrome Extension Works

SHOTA2026년 6월 9일3분intermediate

AI 요약

Context

다국가 여행 계획 시 여러 정부 사이트를 개별 조회해야 하는 비효율적 프로세스 존재. Google Flights라는 SPA 환경의 DOM 구조 내에 실시간으로 외부 데이터를 결합해야 하는 기술적 과제 직면.

Technical Solution

API 호출 제거를 통한 Zero-Latency 구현을 위해 200KB 규모의 Local JSON Matrix를 번들링한 설계
초기 로딩 지연 방지를 위한 Lazy-loading 및 첫 조회 후 메모리 캐싱 전략 적용
SPA의 동적 콘텐츠 변화 대응을 위해 MutationObserver 기반의 DOM 감시 체계 구축
잦은 DOM 변경으로 인한 성능 저하를 막기 위해 500ms Debounce 로직을 통한 함수 실행 횟수 최적화
A/B 테스트로 인해 수시로 변하는 난독화된 클래스명 대응을 위한 Multi-selector Waterfall 폴백 체인 구현
중복 주입 방지를 위해 처리 완료 요소에 data-entrycheck-injected 태그를 부여하는 마킹 기법 도입

실천 포인트

- SPA 환경에서 DOM 변경을 감지할 때는 성능 최적화를 위해 반드시 Debounce 또는 Throttle 적용 - 외부 API 의존성을 줄이기 위해 정적 데이터의 경우 Local JSON 번들링과 Lazy-loading 조합 검토 - 난독화된 DOM 요소 추출 시 단일 선택자가 아닌 우선순위 기반의 Selector Fallback 리스트 구성 - Content Script 내 MutationObserver 사용 후 unload 이벤트에서 disconnect를 호출하여 메모리 누수 방지

태그

#Lazy Loading #MutationObserver #DOM Manipulation #Debouncing #SPA

원문 읽기