피드로 돌아가기
Dev.toFrontend
원문 읽기
MV3 기반 Scroll Position 복구 로직을 통한 브라우저 컨텍스트 스위칭 구현
I Built the Chrome Feature Google Never Shipped
AI 요약
Context
단순 URL 저장 방식으로는 페이지 로드 후 Scroll Position과 상태 유지가 불가능한 한계 존재. 특히 SPA 및 JS-heavy 페이지의 동적 렌더링 특성으로 인해 단순 복구 시 초기화되는 문제 발생.
Technical Solution
- Race Condition 방지를 위해 탭 생성 전 Listener를 선등록하는 사전 제어 구조 설계
- DOM 렌더링 완료 시점(
status === 'complete') 이후 300ms의 의도적 지연 시간을 부여하여 JS 초기화에 따른 스크롤 리셋 방지 chrome.scripting.executeScript를 통한 타겟 탭 내window.scrollTo강제 실행 로직 구현- Restricted URLs(chrome:// 등)에 대한 Guard Clause를 배치하여 스크립트 주입 실패로 인한 런타임 크래시 방지
- MV3 Service Worker의 Ephemeral 특성에 대응하여 모든 상태를
chrome.storage.local에 즉시 영속화하는 Stateless 설계
실천 포인트
- Chrome Extension 개발 시 Service Worker의 가변적 생명주기를 고려하여 In-memory 상태 저장 지양 - SPA 대상 스크립트 주입 시 프레임워크의 렌더링 사이클을 고려한 적절한 Delay 타임 설정 검토 - 브라우저 보안 정책에 따른 Restricted URL 리스트를 사전 정의하여 예외 처리 로직 필수 적용