Oiia Cat: 스크롤 반응형 Chrome 확장 프로그램

웹페이지를 스크롤할 때 화면 오른쪽 아래의 고양이가 회전하고, 스크롤이 멈추면 정지 이미지로 전환되는 Chrome 확장 프로그램입니다.

Chrome 웹 스토어에 공개했으며 촬영한 스토어 화면 기준 평점 5.0과 사용자 192명을 기록했습니다.

GitHub 저장소 보기 , YouTube 시연 영상 보기


스크롤 상태와 미디어 동기화

Content Script에서 scroll 이벤트를 감지해 WebM 영상을 재생하고, 마지막 입력 후 50ms가 지나면 영상을 멈춘 뒤 정지 GIF로 교체합니다. 같은 상태 전환에서 오디오의 재생 위치도 초기화해 영상과 사운드가 어긋나지 않도록 구성했습니다.

사용자 설정 유지

팝업에서 고양이 표시 여부, 사운드, 빠른 재생 모드와 볼륨을 조절할 수 있습니다. 설정은 chrome.storage.sync에 저장해 브라우저를 다시 열거나 다른 페이지로 이동해도 같은 상태를 유지합니다.

Manifest V3 리소스 구성

영상, GIF와 오디오를 web_accessible_resources로 선언하고 chrome.runtime.getURL()로 안전하게 참조했습니다. 일반 모드와 빠른 모드의 미디어를 분리해 설정 변경 시 해당 리소스만 다시 로드합니다.