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은 다음에 열 때 새로 떠.
• Content script: extension reload 한 다음 추가로 content script가 injected 된 host page도 refresh 해. Chrome이 소급해서 re-inject 하지 않아 — content script는 page load 때만 실행돼.

두 번째는 누구나 한 번은 까먹어. 까먹고 나서 content-script 로그가 조용한 걸 본 다음부터 몸이 알아서 기억하게 되지.

Update lifecycle

Web Store extension은 Chrome이 몇 시간마다 확인해서 조용히 갱신해 줘. Unpacked extension은 직접 갱신하는 거야 — reload 버튼 이 곧 update 고.

manifest의 version을 "0.1.0"에서 "0.2.0"으로 bump 하고 reload 하면, Chrome이 chrome.runtime.onInstalled를 reason "update"로 fire. 거기가 migration을 걸 자리야 — storage schema 올리고, 낡은 항목 치우고, alarm 새로 잡고. Track 2에서 이걸 본격적으로 연결할 거야. 지금은 그런 hook이 있다는 것만 알아 둬.

Errors panel

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

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

Errors panel은 한번 쌓이면 안 사라져. 직접 지우거나 reload 하기 전까지 계속 누적돼. 빡세게 돌릴 땐 테스트할 때마다 먼저 비워서 방금 난 것만 보이게 해.

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 / 반복.