Overview
This course teaches modern web extension development by building a complete, production-ready browser extension from scratch. You’ll create TabNotes, a practical note-taking extension that works across Chrome and Firefox, while learning fundamental extension APIs and development patterns.
By the end of this 14-lesson series, you’ll have a published extension available in both the Chrome Web Store and Firefox Add-ons marketplace.
What We’re Building
TabNotes is a browser extension that lets users save notes for specific websites. Each note persists with its corresponding URL, creating a personal annotation system for the web.
View the Source Code: All lesson code is available on GitHub with commit-by-commit progression showing exactly what changes in each lesson.
What You’ll Learn
This course covers the complete web extension development workflow:
Extension Architecture:
- Understanding manifest.json and extension permissions
- Popup windows, background scripts, and content scripts
- Message passing between extension components
- Extension lifecycle and service workers
Browser APIs:
chrome.storageAPI for data persistencechrome.tabsAPI for tab detection and managementchrome.actionAPI for icon manipulationchrome.runtimeAPI for extension messaging
Modern Tooling:
- WXT framework for cross-browser development
- TypeScript for type-safe extension code
- Hot module reloading for faster development
- Production builds and store submission
Best Practices:
- Permission management and security
- User experience patterns for extensions
- Cross-browser compatibility strategies
- Publishing to Chrome Web Store and Firefox Add-ons
Prerequisites
This course assumes intermediate JavaScript knowledge and basic familiarity with web development.
Required Skills:
- JavaScript ES6+ (async/await, destructuring, modules)
- DOM manipulation and event handling
- Basic CSS for styling
Helpful but Not Required:
- TypeScript (I’ll explain TypeScript syntax as we go)
- Modern build tools (Vite, bundlers)
- Browser DevTools experience
Development Environment:
- Node.js installed (16.x or higher)
- A package manager (npm, yarn, pnpm, or bun)
Try It Out
Before starting development, explore the finished extension to understand what we’re building:
Install the Published Extension:
Course Structure
Progressive Learning Path
This course follows a build-as-you-learn approach. Each lesson introduces one new concept and immediately implements it in the TabNotes extension.
No templates or boilerplate - we start with an empty folder and build everything from scratch, ensuring you understand every line of code.
Incremental complexity - early lessons cover fundamentals (manifest, permissions, popup), while later lessons tackle advanced topics (messaging, lifecycle, production builds).
Production-ready result - by Lesson 14, you’ll have a fully functional extension ready for publication, not just a tutorial project.
Lessons Overview
- Introduction - Course overview and setup (you are here)
- Extension Basics - Create your first minimal extension
- WXT Framework - Modern development environment with hot reloading
- Manifest Configuration - Permissions and extension metadata
- Popup Interface - Build the note-taking UI
- Storage API - Persist notes with chrome.storage
- Dynamic Icons - Visual feedback for notes
- Tab Detection - Monitor user navigation
- Content Scripts - Inject code into web pages
- Messaging - Communication between extension components
- Custom Pages - Settings and management interfaces
- Extension Lifecycle - Service workers and background logic
- Polish & UX - Final improvements and bug fixes
- Publishing - Submit to Chrome Web Store and Firefox Add-ons
What’s Next
Ready to build your first extension? Lesson 2 walks through creating a minimal Chrome extension to understand the fundamental concepts before introducing modern tooling.
You’ll create a basic extension that logs tab changes - simple enough to understand immediately, but demonstrating core extension concepts you’ll use throughout the course.