Chrome Extensions Quest

Tracks

1. 01📜MV3 입문

   0/6 lessons

   Manifest V3 — Chrome extension 게임의 새 룰

   Chrome extension은 manifest.json 한 장에 살고 죽어. Track 1 에서는 MV3가 뭘 바꿨는지 열어 보고, 설치하고 다시 올리는 흐름을 직접 걸어 보고, ClipDeck의 첫 뼈대를 내보낼 거야 — 최소한의 manifest에 지금 페이지 제목을 보여 주는 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 — event로 깨고, 놀면 쫓겨나고, 그래도 기억은 남기는 층

   Track 2에서 ClipDeck의 background.js를 연결해. chrome.runtime.onInstalled로 첫 설치를 준비하고, chrome.tabs.onUpdated로 방문한 주소를 듣고, chrome.storage.local을 worker가 evict 돼도 버티는 상태 저장소로 써. 다 끝나면 ClipDeck이 worker가 몇 번을 다시 살아나도 방문 수를 계속 쌓고, popup이 그 누적값을 보여 줘. 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을 페이지 안으로 들여보내. content script는 user의 tab 안에서 DOM을 전부 만질 수 있게 돌지만, JavaScript 세계는 따로 떨어져 있어 — 페이지 자기 스크립트랑 전역 변수를 나눠 쓰지 않아. 다 끝나면 ClipDeck이 살아 있는 페이지에서 고른 텍스트를 읽어 메시지로 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 옆에 나란히 서서, 다른 데를 눌러도 안 죽고, clip이 숨 쉴 자리를 내줘. 다 끝나면 side panel에 시각과 출처 주소를 단 clip 목록이 통째로 뜨고, popup은 빠른 동작만 남긴 자리로 줄어들어. 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, 우클릭 메뉴 — user가 매일 만나는 자리

   Track 5에서 ClipDeck의 toolbar icon이 hello-world 버튼에서 진짜 일하는 자리로 바뀌어. tab 별 badge 숫자, 상황에 따라 달라지는 popup 내용, 우클릭 'Save to ClipDeck' 메뉴, 원하면 붙이는 주소창 키워드, 그리고 tab 마다 담기를 켜고 끄는 스위치까지. user는 popup을 side panel 보다 열 배쯤 자주 열어. 이 track은 그 열 번의 손길을 값지게 만드는 시간이야.

   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의 권한은 세 갈래야 — API 권한 (storage, tabs, scripting), host 권한 (어느 사이트를 만질 수 있는지), 그리고 설치할 때가 아니라 쓸 때 물어보는 선택 권한. Chrome Web Store는 과하게 달라는 extension을 반려하고, user는 너무 들이대는 걸 지워 버려. 이 track은 아무도 놀라게 하지 않으면서 할 일은 다 하는 manifest를 내보내는 법, 그리고 '싫어' 라고 답하는 user를 위해 설계하는 법을 보여 줘.

   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 연장통을 넓혀. 기사 본문을 뽑는 Mozilla Readability, Selection과 Range를 깊게 파기, chrome.tabs.captureVisibleTab으로 화면 오려 내기, React를 속이지 않고 입력창 채우는 요령, 그리고 실제 페이지를 건드리는 동작이라면 뭐든 앞세워야 할 미리보기·확인 패턴까지. 마지막은 side panel 안에서 CRUD의 U와 D로 닫아 — 그 자리에서 고치고, 지우고, 되돌리기. 다 끝나면 ClipDeck이 framework로 뒤덮인 사이트도 감당하고, 저장한 clip의 한 살이를 온전히 받쳐 줘.

   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을 내보내. 꼭 필요한 네 크기의 icon, unpacked와 packed의 갈림길, 개인정보 처리방침과 등록 정보를 갖춘 Chrome Web Store 제출, 조직 안에서만 쓰는 배포, 그리고 파일 하나짜리 content script를 넘어 자랄 수 있게 해 주는 bundler 설정까지. 다 끝나면 ClipDeck은 공개 주소든 비공개 주소든 하나를 가진 진짜 software가 돼. 다른 사람이 Install을 누를 수 있는.

   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.2.1

   0/10 lessons

   실제로 나간 extension을 파일 하나씩 — 앞의 여덟 track이 가르친 걸 전부 써먹는 자리

   Track 9는 현재 Pippa ChromeEmbed v0.2.1을 end to end로 걸어. Exact manifest host, service-worker router, page capture, popup doorway, cwkPippa iframe bridge, tab-scoped identity, assisted insertion, display mode 셋을 ClipDeck pattern에 연결하되 ChromeEmbed를 두 번째 Pippa로 만들지는 않아.

   

   Lesson list (10)

   • 01
     Anchor 1 — Manifest 해부~10 min · manifest, case-study, chromeembed, v0.2.1
   • 02
     Anchor 2 — Background가 message bus~12 min · background, service-worker, messaging, case-study, v0.2.1
   • 03
     Anchor 3 — Content script가 page sensor~13 min · content-script, dom, viewport, case-study, v0.2.1
   • 04
     Anchor 4 — Popup가 doorway~8 min · popup, side-panel, case-study, single-responsibility, v0.2.1
   • 05
     Anchor 5 — Side panel이 iframe bridge~12 min · side-panel, iframe, postMessage, bridge, v0.2.1
   • 06
     Anchor 6 — Viewport context payload shape~11 min · payload, schema, context, case-study, v0.2.1
   • 07
     Anchor 7 — Refactor 권한 (그리고 안 할 때)~10 min · refactor, discipline, v0.1, case-study, v0.2.1
   • 08
     Anchor 8 — What's Next: Dock / hybrid / input-only / DOM tool~10 min · roadmap, v2, case-study, quest-wrap, v0.2.1
   • 09
     Anchor 9 — 세 개의 표시 모드: 미뤄둔 기능이 실제로 나왔을 때~14 min · display-mode, dock, overlay, storage, v0.2, case-study, v0.2.1
   • 10
     Anchor 10 — host registry 하나, script realm 넷~20 min · host-registry, mv3, configuration, classic-scripts, v0.2.1

   ✓퀴즈 · 5 문제→