Chrome Extensions Quest

Tracks

1. 01📜MV3 입문

   0/6 lessons

   Manifest V3 — Chrome extension 게임의 새 룰

   Chrome extension 은 manifest.json 한 장에 살고 죽어. Track 1 은 MV3 시대를 열어보고, install lifecycle 을 걸어보고, ClipDeck 의 hello-world skeleton 을 ship 해 — minimal manifest + 현재 page title 보여주는 popup.

   Lesson list (6)

   • 01
     Chrome Extension 이 도대체 뭐야?~10 min · mv3, transition, overview, intro, clipdeck-intro
   • 02
     manifest.json 안에 뭐가 들어가?~12 min · mv3, manifest, schema, clipdeck, hands-on
   • 03
     Install, Reload, Update — dev loop~8 min · install-workflow, load-unpacked, developer-mode, chrome-extensions-page, clipdeck, hands-on
   • 04
     Hello ClipDeck — 첫 동작하는 popup~14 min · clipdeck, popup, chrome.tabs, first-working-demo, hands-on
   • 05
     MV3 보안 모델 — Sandbox, CSP, Permissions~12 min · mv3, security, csp, permissions, host_permissions, sandbox
   • 06
     MV3 Gotchas — MV2 에서 뭐가 깨졌어~10 min · mv3, migration, gotchas, service-worker, deprecations

   ✓퀴즈 · 5 문제→

2. 02⚙️Service Worker

   0/6 lessons

   MV3 의 background context — event-driven, idle-evicted, household 의 memory 층

   Track 2 가 ClipDeck 의 background.js 를 wire 해. chrome.runtime.onInstalled 로 첫 install 셋업, chrome.tabs.onUpdated 로 방문 URL listening, chrome.storage.local 이 worker eviction 을 견디는 state layer. 끝나면 ClipDeck 이 worker 재시작 너머로 방문 URL 카운트 누적하고 popup 이 그 running total 표시 — CRUD 의 R 워밍업.

   Lesson list (6)

   • 01
     Service Worker 가 도대체 뭐야?~10 min · service-worker, background, mv3, lifecycle, concepts
   • 02
     Service Worker 등록하기~10 min · service-worker, manifest, background, clipdeck, hands-on
   • 03
     Event-driven vs Persistent — Idle Worker~11 min · service-worker, lifecycle, eviction, events, state-loss
   • 04
     chrome.storage — Eviction 견디는 state layer~12 min · chrome.storage, state, async, service-worker, json
   • 05
     Message passing — Popup 과 SW 사이의 짧고 팽팽한 줄~12 min · messaging, runtime, sendMessage, onMessage, async, service-worker
   • 06
     ClipDeck 방문 카운터 — Storage + Message + Tabs 한 loop~15 min · tabs, onUpdated, storage, messaging, service-worker, permissions

   ✓퀴즈 · 5 문제→

3. 03✋Content Script

   0/6 lessons

   페이지 안의 손 — DOM 접근, isolated world, host bridge

   Track 3 가 ClipDeck 을 host page 안으로 보냄. Content script 는 user 의 tab 안에서 DOM 전체 access 와 함께 돌지만 isolated JavaScript world — page 자체 스크립트와 global 공유 안 함. 끝나면 ClipDeck 이 live page 에서 선택 텍스트 read 하고 message channel 통해 service worker 로 보내서 storage 에 저장. CRUD-C 도착.

   Lesson list (6)

   • 01
     Content script 가 뭐고 왜 있는 거?~10 min · content-script, isolated-world, dom, concepts
   • 02
     들어가는 두 방식 — Declarative injection vs chrome.scripting~12 min · content-script, injection, manifest, chrome.scripting, permissions
   • 03
     Isolated world — 같은 DOM, 다른 JavaScript~12 min · isolated-world, security, content-script, scripting, world-main
   • 04
     DOM access — Selection, listener, MutationObserver~14 min · dom, selection, events, mutation-observer, spa
   • 05
     Page bridge — Host 의 JavaScript world 와 대화~12 min · page-bridge, postMessage, custom-event, web-accessible-resources, world-main
   • 06
     ClipDeck Save Clip — CRUD-C 도착~15 min · clipdeck, crud, selection, messaging, storage, hotkey

   ✓퀴즈 · 5 문제→

4. 04📑Side Panel

   0/6 lessons

   Chrome 114+ 의 영구 dock — popup 의 크고 느린 형제

   Track 4 가 ClipDeck 을 tooltip 에서 영구 dock 으로 졸업. Side panel 은 user tab 과 나란히 돌고, 다른 곳 click 살아남고, clip 에 숨 쉴 공간 줘. 끝나면 side panel 이 timestamp 와 source URL 가진 전체 clip list 보이고, popup 은 quick-action surface 로 축소, CRUD-R 완전히 도착.

   Lesson list (6)

   • 01
     Side panel 이 뭔지 — Chrome 의 영구 dock~10 min · side-panel, concepts, ux, chrome-114
   • 02
     Side panel 등록 — Manifest + chrome.sidePanel~12 min · side-panel, manifest, chrome.sidePanel, setOptions, user-gesture
   • 03
     Panel vs Popup vs Full Tab — 맞는 surface 고르기~10 min · side-panel, popup, tabs.create, ux, architecture
   • 04
     Per-tab vs global side panel — 두 scoping 모델~12 min · side-panel, setOptions, per-tab, global, tabs
   • 05
     Iframe 과 CSP — Panel 에서 외부 content 안전하게 load~13 min · side-panel, csp, iframe, frame-src, web-accessible-resources
   • 06
     ClipDeck List View — Panel 에 CRUD-R 도착~14 min · clipdeck, crud, side-panel, search, clipboard

   ✓퀴즈 · 5 문제→

5. 05🎚️Action & Popup

   0/5 lessons

   Toolbar icon, badge, popup, context menu — user 의 매일 접하는 surface

   Track 5 가 ClipDeck 의 toolbar icon 을 hello-world 버튼에서 진짜 action surface 로 전환. Per-tab badge 카운트, dynamic popup content, right-click 'Save to ClipDeck' context menu, 선택적 omnibox 단축키, v1 mode toggle (tab 별 capture on/off). 대부분 user 가 popup 을 side panel 보다 열 배 더 자주 만짐 — 이 track 이 그 열 번의 tap 을 의미 있게 만듦.

   Lesson list (5)

   • 01
     chrome.action API — Icon / title / badge / popup~11 min · chrome.action, manifest, badge, icon, popup
   • 02
     Popup 디자인 패턴 — 작고, 빠르고, single-purpose~12 min · popup, ux, accessibility, performance
   • 03
     Context menu — Right-click 을 first-class trigger 로~12 min · contextMenus, selection, right-click, background
   • 04
     키보드 단축키와 omnibox — Power-user trigger~12 min · commands, omnibox, keyboard, power-user
   • 05
     ClipDeck Mode Toggle — Per-tab pause / resume~14 min · clipdeck, mode-toggle, badge, per-tab, storage

   ✓퀴즈 · 5 문제→

6. 06🔐Permission

   0/5 lessons

   신뢰 계약 — 뭘 요청하는지, 어떻게 요청하는지, user 가 어떻게 거절하는지

   Track 6 가 ClipDeck 의 manifest 를 진지하게 다룸. MV3 permission 모델은 API permission (storage / tabs / scripting), host permission (만질 수 있는 site), optional permission (install 이 아닌 runtime 에 요청) 으로 split. Chrome Web Store 가 overreach 하는 extension 거부; user 가 너무 공격적 prompt 하는 거 uninstall. 이 track 이 아무도 놀라게 안 하고 일 끝내는 manifest ship 하는 법, 그리고 '아니' 라고 말하는 user 위해 design 하는 법 보여 줘.

   Lesson list (5)

   • 01
     Permission 모델 개관 — 세 카테고리, 하나의 신뢰 계약~11 min · permissions, manifest, mv3, trust
   • 02
     Declared vs optional permission — 두 grant 순간을 실용으로~12 min · permissions, optional_permissions, chrome.permissions, user-gesture
   • 03
     Host permission — URL match pattern 과 install 경고~11 min · host_permissions, url-pattern, all_urls, install-warning
   • 04
     activeTab 와 다른 narrow permission — 무서운 경고 회피~11 min · activeTab, permissions, narrow-permissions, ux
   • 05
     ClipDeck just-in-time permission — End-to-end 전체 flow~14 min · clipdeck, optional_permissions, ux, export, host-request

   ✓퀴즈 · 5 문제→

7. 07🛠️DOM Tools

   0/7 lessons

   Messy real-world page 작업 도구 — 그리고 CRUD 의 U+D

   Track 7 가 ClipDeck 의 DOM toolbox 넓힘: article 추출에 Mozilla Readability, Selection/Range deep dive, chrome.tabs.captureVisibleTab 통한 screenshot clipping, React-friendly input-fill trick, 실제 page 만지는 어떤 action 에든 preview-and-confirm 패턴. Track 이 side panel 안 CRUD-U 와 CRUD-D — inline edit / inline delete / undo — 로 닫힘. 끝나면 ClipDeck 이 framework-heavy site 처리하고 저장된 clip 의 full lifecycle 지원.

   Lesson list (7)

   • 01
     DOM Tools 개관 — Real-world toolkit~10 min · dom, overview, tooling, concepts
   • 02
     Readability 추출 — Mozilla 의 Reader Mode 를 content script 에~12 min · readability, article, extraction, mozilla
   • 03
     Selection 과 Range — toString 너머~12 min · selection, range, dom, deep-dive
   • 04
     Screenshot 과 clipping — captureVisibleTab + canvas crop~13 min · screenshot, captureVisibleTab, canvas, clipping
   • 05
     React-friendly fill input — Native setter trick~11 min · react, fill-input, synthetic-events, framework
   • 06
     Preview 와 confirm — Mutate 전 신뢰 얻기~11 min · preview-confirm, ux, trust, overlay
   • 07
     ClipDeck edit 와 delete — Undo 가진 CRUD-U + CRUD-D~14 min · clipdeck, crud, edit, delete, undo

   ✓퀴즈 · 5 문제→

8. 08📦Packaging

   0/5 lessons

   Icon / build / publish — 작업 폴더를 다른 사람이 install 할 수 있는 것으로

   Track 8 가 ClipDeck ship. 네 required size 의 icon, unpacked-vs-packed split, privacy policy 와 store listing 가진 Chrome Web Store submission, org-only extension 위한 private-fleet distribution, one-file content script 넘어 자라게 해 주는 bundler setup. 끝나면 ClipDeck 이 public URL — 또는 private URL — 가진 실제 software, 다른 사람이 Install click 가능.

   Lesson list (5)

   • 01
     Icon 과 branding — 실제로 중요한 네 PNG~9 min · icons, branding, manifest, assets
   • 02
     Unpacked vs packed — Dev loop 와 .crx file~10 min · unpacked, crx, developer-mode, distribution
   • 03
     Web Store submission — Listing / review / privacy policy~13 min · web-store, submission, review, privacy-policy
   • 04
     Private distribution — Self-host / unlisted / group policy~12 min · distribution, private, enterprise, group-policy
   • 05
     Bundler 와 build — esbuild / TypeScript / dist/ pipeline~13 min · bundler, esbuild, typescript, build

   ✓퀴즈 · 5 문제→

9. 09🧪Case Study — Pippa ChromeEmbed v0.1

   0/8 lessons

   실제 ship 된 extension, file by file — 첫 여덟 track 이 가르친 모든 것의 적용

   Track 9 가 실제 ship 된 extension 을 end to end walk: 모든 page 에 docked iframe 통해 cwkPippa 가구를 올리는 Pippa ChromeEmbed v0.1 prototype. 각 lesson 이 prototype 의 한 file 이나 한 순간에 anchor, ClipDeck 패턴 으로 parallel draw back. 끝나면 production Chrome extension 이 실제로 어떻게 composing 하는지 working mental model, 그리고 v0.1 이 충분한 때와 아닌 때 아는 규율.

   

   Lesson list (8)

   • 01
     Anchor 1 — Manifest 해부~10 min · manifest, case-study, chromeembed
   • 02
     Anchor 2 — Background 가 message bus~12 min · background, service-worker, messaging, case-study
   • 03
     Anchor 3 — Content script 가 page sensor~13 min · content-script, dom, viewport, case-study
   • 04
     Anchor 4 — Popup 가 doorway~8 min · popup, side-panel, case-study, single-responsibility
   • 05
     Anchor 5 — Side panel 이 iframe bridge~12 min · side-panel, iframe, postMessage, bridge
   • 06
     Anchor 6 — Viewport context payload shape~11 min · payload, schema, context, case-study
   • 07
     Anchor 7 — Refactor 권한 (그리고 안 할 때)~10 min · refactor, discipline, v0.1, case-study
   • 08
     Anchor 8 — What's Next: Dock / hybrid / input-only / DOM tool~10 min · roadmap, v2, case-study, quest-wrap

   ✓퀴즈 · 5 문제→