Service Worker 등록하기

"Track 1 은 ClipDeck 을 순수 UI — popup 전용 — 으로 끝냈어. Track 2 가 background 를 부여하면서 시작. Manifest field 하나, 파일 하나, reload 한 번, ClipDeck 이 service worker 를 갖게 돼."

Manifest field 하나, 파일 하나

Manifest 변경은 작아: top-level background object 하나가 worker 파일 가리킴. 세 가지 주목:

• service_worker 는 단수. MV2 (배열의 scripts 를 받았던) 와 다르게, MV3 는 파일 정확히 하나만 받아. Logic 분할 필요하면 ES module import 사용.
• Path 는 extension root 기준 상대, icons 나 popup 과 동일.
• persistent field 없어 — 모든 MV3 service worker 는 정의상 event-driven. 옛 background page 를 살려두던 MV2 의 persistent: true 트릭은 그냥 사라졌어.

그게 background context 의 manifest 계약 전부. clipdeck/ 안 manifest.json 옆에 새 파일 저장.

Skeleton background.js

Listener 셋, module-level state 없음, setInterval 없음. 파일 위 부분은 매 wake-up 마다 실행; listener 는 event fire 시 실행. 그게 건강한 MV3 service worker 의 전체 형태 — event handler 의 flat 파일, 그 외 아무것도 없음.

알아둘 등록 두 가지:

• chrome.runtime.onInstalled — install 시 한 번, 매 extension update 시 한 번, Chrome update 시에도 fire. details.reason 으로 분기.
• chrome.runtime.onStartup — Chrome 이 extension 이미 install 된 상태로 launch 할 때 fire. Browser session 당 한 번 일어나야 하는 daily-rollup 류 작업에 유용.

위 부분의 console.log 가 너의 eviction tracker: DevTools 에서 그게 다시 print 될 때마다 worker 가 방금 cold start 한 거.

Reload, 검증, 깨우기

Manifest 업데이트 + background.js 저장 후:

1. chrome://extensions 의 ClipDeck 카드 reload.
2. chrome://serviceworker-internals 열고 ClipDeck 검색. Entry 하나 보여야 함: ClipDeck 의 service worker, 상태 RUNNING, 신선한 registration timestamp.
3. 대략 30 초 대기. Refresh. 상태가 STOPPED 로 전환.
4. ClipDeck toolbar icon 클릭 (event 면 뭐든 — message / alarm / tab change). Refresh. 상태 RUNNING 으로 복귀.

그게 service worker 의 전체 dev loop: edit → reload → worker 존재 확인 → 필요할 때 깨우기 → idle out 관찰.

Service worker 검사하기

chrome://extensions → ClipDeck 카드 → "Details" → "Inspect views: service worker". DevTools 가 worker scope 로 열림. Console 이 background.js 의 top-level 실행에서 나온 [ClipDeck SW] alive at ... 로그 보여줘. Network 패널은 fetch request (있으면). Application 탭은 storage (lesson 4 가 거기 살아). Sources 탭은 breakpoint, listener step-through, local 검사 가능.

알아둘 quirk 두 개:

• Worker evict 돼도 DevTools window 는 열린 채로 유지. 다음 wake 가 같은 DevTools session 에 재attach.
• 디버깅 도중 DevTools 닫으면 breakpoint 잃음. 다시 열고 재설정.

ClipDeck 이 이제 background 를 가짐

이 lesson 후 ClipDeck 은 surface 둘 — popup (UI, on-demand) 와 service worker (background, event-driven). Lesson 3 이 lifecycle 깊이, state loss 직접 데모 포함. Lesson 4 가 chrome.storage 를 생존 layer 로 추가. Lesson 5 가 popup ↔ SW message passing wire. Lesson 6 이 visit counter 로 묶음 — CRUD 의 R 워밍업.