Install, Reload, Update — dev loop

"chrome://extensions 가 extension 개발의 출입구야. Dev mode 가 폴더를 가리키면 Chrome 이 그 자리에서 read — rebuild 단계 없음, packaging round-trip 없음. Iteration loop 가 그래서 짧아."

Extension 은 어디에서 load 돼?

모든 Chrome extension 은 — Web Store 에서 install 됐든, 개발자 build 에서 sideload 됐든, disk 에서 unpacked 됐든 — chrome://extensions 페이지에 등재돼. 그 페이지가 Chrome 의 extension control plane: toggle / reload / inspect / remove / errors 확인을 다 거기서 해.

개발할 때 중요한 스위치는 딱 하나: 오른쪽 위 Developer mode. 켜면 버튼 셋이 떠 — Load unpacked / Pack extension / Update. 그 중 Load unpacked 가 iteration loop 를 굴리는 버튼.

Load Unpacked: 세 단계

Lesson 2 에서 만든 clipdeck/ 디렉토리 (manifest 가 들어 있는) 에서 시작:

1. chrome://extensions 열기.
2. Developer mode 켜기 (오른쪽 위 toggle).
3. Load unpacked 클릭 → clipdeck/ 폴더 선택.

Chrome 이 manifest.json 을 그 자리에서 읽어. Parse 깨끗하면 extension card 가 떠 — ID (32 hex 자, unpacked 의 경우 폴더 path 기반), Name ("ClipDeck"), Version ("0.1.0"), Description, 그리고 Details / Remove / Errors 버튼 줄. ClipDeck 아이콘이 toolbar 에도 보여 — 지금 클릭은 아무 일도 안 일어나 (popup.html 이 아직 없어; Lesson 4 의 일).

Manifest parse 실패하면 카드에 빨간 Errors 표시. 클릭하면 JSON parse error, 빠진 field, Chrome 이 못 찾은 파일 등 표시. manifest 고치고, 카드의 reload (↻) 버튼 클릭, Chrome 이 디렉토리 다시 read.

Reload 버튼

Reload 버튼이 dev loop 의 심장. manifest.json / background.js / popup.html / popup.js / 그 외 어떤 extension 파일이든 수정했으면 reload 클릭. Chrome 이 즉시 새 파일 집어 와.

두 가지 refresh 패턴 기억:

• Extension chrome (popup / side panel / background / options page): reload 버튼만으로 충분. Popup 은 닫았다 다시 열고, side panel 은 다음 열림 때 re-mount.
• Content script: extension reload 한 다음 추가로 content script 가 injected 된 host page 도 refresh 해. Chrome 이 소급해서 re-inject 하지 않아 — content script 는 page load 때만 실행돼.

두 번째 패턴은 누구나 한 번은 잊어버려. 처음 잊고 content-script 로그가 조용해진 걸 본 다음부터 muscle memory 돼.

Update lifecycle

Web Store extension 은 Chrome 이 몇 시간마다 update check 해서 silently 적용. Unpacked extension 은 네가 update — reload 버튼 이 update.

manifest 의 version 을 "0.1.0" 에서 "0.2.0" 으로 bump 하고 reload 하면, Chrome 이 chrome.runtime.onInstalled 를 reason "update" 로 fire. 그게 migration 의 hook — storage schema bump, stale entries clear, 새 alarms 설정. Track 2 가 이걸 본격적으로 wire 해; 지금은 hook 존재한다는 것만.

Errors panel

모든 extension card 에 Errors 버튼 있어 (errors 있을 때만 보임). 클릭하면:

• manifest parse 실패
• service worker exception (timestamp + stack trace)
• 페이지별 content script exception
• permission warning

Errors panel 은 sticky — clear 하거나 reload 하기 전까지 errors 누적. 빡세게 iterate 할 때는 각 테스트 전에 clear 해서 최신 noise 만 보이게.

ClipDeck 첫 load

Lesson 2 의 exercise 따라했으면 clipdeck/ 폴더에 manifest.json 과 placeholder 아이콘 셋 있음. 이걸 지금 load 하면 ClipDeck 이 진짜 Chrome extension 으로 존재 — sandbox 됨, 등재됨, toolbar 아이콘 + stable extension ID 까지. Popup 은 비어 있음; Lesson 4 가 채워. 근데 lifecycle 은 이미 손에 들어옴: edit / reload / 필요시 host page refresh / 반복.