🧽 SpongeClock

발표용 스펀지 타이머 크롬 익스텐션. 목표 시각까지 남은 시간을 보여주고, 시간이 다가올수록 스펀지 캐릭터가 빨개지며 놀라는 표정으로 바뀝니다.

기능

• 목표 시각(시:분)을 스크롤 휠로 설정
• 툴바 아이콘 → 작은 popup에 라이브 타이머 + 스펀지 캐릭터
• 크게 보기(PiP): Document Picture-in-Picture 창으로 띄워 다른 창·다른 앱으로 넘어가도 항상 화면 맨 위에 표시
• 단계별 변화: 여유(노랑) → 주의(주황·펄스) → 임박(빨강·흔들림) → 종료(깜빡임·초과 카운트)
• chab 굵은 폰트의 큰 숫자

설치 (개발자 모드)

1. chrome://extensions 열기
2. 우상단 "개발자 모드" 켜기
3. "압축해제된 확장 프로그램 로드" → 이 폴더 선택

사용

1. 툴바의 SpongeClock 아이콘 클릭
2. 목표 시·분을 스크롤로 맞추기 (자동으로 카운트다운 시작)
3. "크게 보기" 버튼 → 큰 타이머 창이 항상 위에 떠 발표 중 다른 작업을 해도 보입니다

구조

• src/timer-core.js — 순수 시간 로직(단위 테스트 대상)
• src/timer-view.js — 스펀지 캐릭터 SVG · 스타일 · 렌더링 (popup/PiP 공유)
• src/popup.html / src/popup.js — 시간 설정 + 라이브 미리보기 + PiP 열기
• src/pip.js — PiP 창 안에서 독립적으로 도는 타이머

개발

• 핵심 시간 로직 테스트: npm test (node --test)
• 의존성 없음 (vanilla JS, Manifest V3, ES modules)

단계 임계값 (기본값)

단계	조건	색
여유	남은 시간 > 2분	노랑
주의	≤ 2분	주황 (펄스)
임박	≤ 30초	빨강 (흔들림)
종료	≤ 0초	진빨강 (깜빡임 + 초과 카운트)

참고

• "크게 보기(PiP)"는 Chrome 116 이상에서 동작합니다.
• 목표 시각이 현재보다 이른 시각이면 "다음 날 그 시각"으로 계산됩니다.