Chrome Extensions Quest

Tracks

1. 01📜MV3 Foundations

   0/6 lessons

   Manifest V3 — the new rules of the Chrome extension game

   Chrome extensions live or die by manifest.json. Track 1 cracks open the MV3 era, walks the install lifecycle, and ships ClipDeck's hello-world skeleton — a minimal manifest plus a popup that surfaces the current page title.

   Lesson list (6)

   • 01
     What Is a Chrome Extension, Really?~10 min · mv3, transition, overview, intro, clipdeck-intro
   • 02
     Anatomy of manifest.json~12 min · mv3, manifest, schema, clipdeck, hands-on
   • 03
     Install, Reload, Update — The Dev Loop~8 min · install-workflow, load-unpacked, developer-mode, chrome-extensions-page, clipdeck, hands-on
   • 04
     Hello ClipDeck — First Working Popup~14 min · clipdeck, popup, chrome.tabs, first-working-demo, hands-on
   • 05
     MV3 Security Model — Sandbox, CSP, Permissions~12 min · mv3, security, csp, permissions, host_permissions, sandbox
   • 06
     MV3 Gotchas — What Broke from MV2~10 min · mv3, migration, gotchas, service-worker, deprecations

   ✓Quiz · 5 questions→

2. 02⚙️The Service Worker

   0/6 lessons

   MV3's background context — event-driven, idle-evicted, the household memory layer

   Track 2 wires up ClipDeck's background.js. chrome.runtime.onInstalled for first-install setup, chrome.tabs.onUpdated listening for visited URLs, chrome.storage.local as the state layer that survives worker eviction. By the end ClipDeck counts visited URLs across worker restarts and the popup shows the running total — the R in CRUD warming up.

   Lesson list (6)

   • 01
     What Is a Service Worker, Really?~10 min · service-worker, background, mv3, lifecycle, concepts
   • 02
     Registering the Service Worker~10 min · service-worker, manifest, background, clipdeck, hands-on
   • 03
     Event-Driven vs Persistent — The Idle Worker~11 min · service-worker, lifecycle, eviction, events, state-loss
   • 04
     chrome.storage — The State Layer That Survives Eviction~12 min · chrome.storage, state, async, service-worker, json
   • 05
     Message Passing — The Short, Taut Rope Between Popup and SW~12 min · messaging, runtime, sendMessage, onMessage, async, service-worker
   • 06
     ClipDeck Visit Counter — Storage + Messages + Tabs in One Loop~15 min · tabs, onUpdated, storage, messaging, service-worker, permissions

   ✓Quiz · 5 questions→

3. 03✋Content Scripts

   0/6 lessons

   The hand inside the page — DOM access, isolated world, host bridges

   Track 3 sends ClipDeck into the host page. Content scripts run inside the user's tab with full DOM access but in an isolated JavaScript world — no shared globals with the page's own scripts. By the end ClipDeck reads selected text from the live page and ships it through the message channel to the service worker for storage. CRUD-C lands.

   Lesson list (6)

   • 01
     What Content Scripts Are and Why They Exist~10 min · content-script, isolated-world, dom, concepts
   • 02
     Two Ways In — Declarative Injection vs chrome.scripting~12 min · content-script, injection, manifest, chrome.scripting, permissions
   • 03
     The Isolated World — Same DOM, Different JavaScript~12 min · isolated-world, security, content-script, scripting, world-main
   • 04
     DOM Access — Selection, Listeners, MutationObserver~14 min · dom, selection, events, mutation-observer, spa
   • 05
     Page Bridge — Talking to the Host's JavaScript World~12 min · page-bridge, postMessage, custom-event, web-accessible-resources, world-main
   • 06
     ClipDeck Save Clip — CRUD-C Lands~15 min · clipdeck, crud, selection, messaging, storage, hotkey

   ✓Quiz · 5 questions→

4. 04📑The Side Panel

   0/6 lessons

   Chrome 114+'s persistent dock — the popup's bigger, slower sibling

   Track 4 graduates ClipDeck from a tooltip into a persistent dock. The side panel runs alongside the user's tab, survives clicks elsewhere, and gives clips room to breathe. By the end the side panel shows the full clip list with timestamps and source URLs, the popup is reduced to a quick-action surface, and CRUD-R is fully landed.

   Lesson list (6)

   • 01
     What the Side Panel Is — Chrome's Persistent Dock~10 min · side-panel, concepts, ux, chrome-114
   • 02
     Registering the Side Panel — Manifest + chrome.sidePanel~12 min · side-panel, manifest, chrome.sidePanel, setOptions, user-gesture
   • 03
     Panel vs Popup vs Full Tab — Picking the Right Surface~10 min · side-panel, popup, tabs.create, ux, architecture
   • 04
     Per-Tab vs Global Side Panels — Two Scoping Models~12 min · side-panel, setOptions, per-tab, global, tabs
   • 05
     Iframes and CSP — Loading External Content Safely in the Panel~13 min · side-panel, csp, iframe, frame-src, web-accessible-resources
   • 06
     ClipDeck List View — CRUD-R Lands in the Panel~14 min · clipdeck, crud, side-panel, search, clipboard

   ✓Quiz · 5 questions→

5. 05🎚️The Action & Popup

   0/5 lessons

   Toolbar icon, badge, popup, context menu — the user's everyday touch surface

   Track 5 turns ClipDeck's toolbar icon from a hello-world button into a real action surface. Per-tab badge counts, dynamic popup contents, a right-click 'Save to ClipDeck' context menu, optional omnibox shortcuts, and the v1 mode toggle (capture on/off per tab). Most users will touch the popup ten times more often than the side panel — this track makes those ten taps count.

   Lesson list (5)

   • 01
     The chrome.action API — Icon, Title, Badge, Popup~11 min · chrome.action, manifest, badge, icon, popup
   • 02
     Popup Design Patterns — Small, Fast, Single-Purpose~12 min · popup, ux, accessibility, performance
   • 03
     Context Menus — Right-Click as a First-Class Trigger~12 min · contextMenus, selection, right-click, background
   • 04
     Keyboard Shortcuts and the Omnibox — Power-User Triggers~12 min · commands, omnibox, keyboard, power-user
   • 05
     ClipDeck Mode Toggle — Per-Tab Pause and Resume~14 min · clipdeck, mode-toggle, badge, per-tab, storage

   ✓Quiz · 5 questions→

6. 06🔐Permissions

   0/5 lessons

   The trust contract — what you ask for, how you ask, how the user says no

   Track 6 takes ClipDeck's manifest seriously. The MV3 permission model splits into API permissions (storage, tabs, scripting), host permissions (which sites you may touch), and optional permissions (asked for at runtime, not install). The Chrome Web Store rejects extensions that overreach; users uninstall ones that prompt too aggressively. This track shows you how to ship a manifest that gets the job done without scaring anybody — and how to design for the user who says 'no.'

   Lesson list (5)

   • 01
     Permission Model Overview — Three Categories, One Trust Contract~11 min · permissions, manifest, mv3, trust
   • 02
     Declared vs Optional Permissions — The Two Grant Moments in Practice~12 min · permissions, optional_permissions, chrome.permissions, user-gesture
   • 03
     Host Permissions — URL Match Patterns and the Install Warning~11 min · host_permissions, url-pattern, all_urls, install-warning
   • 04
     activeTab and Other Narrow Permissions — Avoiding the Scary Warnings~11 min · activeTab, permissions, narrow-permissions, ux
   • 05
     ClipDeck Just-in-Time Permissions — The Whole Flow End to End~14 min · clipdeck, optional_permissions, ux, export, host-request

   ✓Quiz · 5 questions→

7. 07🛠️DOM Tools

   0/7 lessons

   The toolkit for working with messy real-world pages — and the U+D of CRUD

   Track 7 broadens ClipDeck's DOM toolbox: Mozilla Readability for article extraction, Selection/Range deep dive, screenshot clipping via chrome.tabs.captureVisibleTab, the React-friendly input-fill trick, and the preview-and-confirm pattern for any action that touches a real page. The track closes with CRUD-U and CRUD-D inside the side panel — inline edit, inline delete, undo. By the end ClipDeck handles framework-heavy sites and supports the full lifecycle of saved clips.

   Lesson list (7)

   • 01
     DOM Tools Overview — The Real-World Toolkit~10 min · dom, overview, tooling, concepts
   • 02
     Readability Extraction — Mozilla's Reader Mode in Your Content Script~12 min · readability, article, extraction, mozilla
   • 03
     Selection and Range — Beyond toString~12 min · selection, range, dom, deep-dive
   • 04
     Screenshot and Clipping — captureVisibleTab + Canvas Crop~13 min · screenshot, captureVisibleTab, canvas, clipping
   • 05
     React-Friendly Fill Input — The Native Setter Trick~11 min · react, fill-input, synthetic-events, framework
   • 06
     Preview and Confirm — Earn Trust Before You Mutate~11 min · preview-confirm, ux, trust, overlay
   • 07
     ClipDeck Edit and Delete — CRUD-U + CRUD-D With Undo~14 min · clipdeck, crud, edit, delete, undo

   ✓Quiz · 5 questions→

8. 08📦Packaging

   0/5 lessons

   Icons, build, publish — turning the working folder into something other people can install

   Track 8 ships ClipDeck. Icons at the four required sizes, the unpacked-vs-packed split, Chrome Web Store submission with the privacy policy and store listing, private-fleet distribution for org-only extensions, and the bundler setup that lets you grow past one-file content scripts. By the end ClipDeck is real software with a public URL — or a private one — that another person can click Install on.

   Lesson list (5)

   • 01
     Icons and Branding — The Four PNGs That Actually Matter~9 min · icons, branding, manifest, assets
   • 02
     Unpacked vs Packed — Dev Loop and the .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 and Build — esbuild, TypeScript, the dist/ Pipeline~13 min · bundler, esbuild, typescript, build

   ✓Quiz · 5 questions→

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

   0/8 lessons

   A real working extension, file by file — everything the first eight tracks taught, applied

   Track 9 walks a real shipped extension end to end: the Pippa ChromeEmbed v0.1 prototype that puts the cwkPippa household onto every page via a docked iframe. Each lesson anchors on one file or one moment of the prototype, drawing the parallel back to the ClipDeck patterns. By the end you have a working mental model of how a production Chrome extension actually composes — and the discipline to know when v0.1 is enough and when it isn't.

   

   Lesson list (8)

   • 01
     Anchor 1 — Manifest Anatomy~10 min · manifest, case-study, chromeembed
   • 02
     Anchor 2 — Background as the Message Bus~12 min · background, service-worker, messaging, case-study
   • 03
     Anchor 3 — Content Script as the Page Sensor~13 min · content-script, dom, viewport, case-study
   • 04
     Anchor 4 — Popup as a Doorway~8 min · popup, side-panel, case-study, single-responsibility
   • 05
     Anchor 5 — Side Panel as an Iframe Bridge~12 min · side-panel, iframe, postMessage, bridge
   • 06
     Anchor 6 — The Viewport Context Payload Shape~11 min · payload, schema, context, case-study
   • 07
     Anchor 7 — Permission to Refactor (and When Not To)~10 min · refactor, discipline, v0.1, case-study
   • 08
     Anchor 8 — What's Next: Dock, Hybrid, Input-Only, DOM Tools~10 min · roadmap, v2, case-study, quest-wrap

   ✓Quiz · 5 questions→