Chrome Extension Mastery: Build Full-Stack Extensions with React & Node.js
10h 3m 45s
English
Paid
Course description
Learn to build fully-fledged Chrome extensions from scratch to production! Acquire the skills to develop powerful, functional Chrome extensions using a modern technology stack and best practices. In this course, you will create an advanced extension that integrates with a standalone React interface and interacts with an API on Node.js. This is the course I wish I had when I was just starting out with Chrome extensions!
Watch Online
0:00
/ #1: 1.1. Welcome & project preview
All Course Lessons (54)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 1.1. Welcome & project preview Demo | 04:36 | |
| 2 | 1.2. Environment & tool setup | 05:58 | |
| 3 | 1.3. Using the project files | 01:55 | |
| 4 | 2.1. Creating the React app structure and installing dependencies | 06:59 | |
| 5 | 2.2. Setting up theming, routes, and context | 13:43 | |
| 6 | 3.1. Creating the Dockerfile and installing dependencies | 15:29 | |
| 7 | 3.2. Setting up base app structure | 19:59 | |
| 8 | 4.1. Creating the registration API endpoint | 25:35 | |
| 9 | 4.2. Sending emails with nodemailer | 10:44 | |
| 10 | 4.3. Communicating between the UI and API | 09:24 | |
| 11 | 4.4. Building reusable base components | 19:12 | |
| 12 | 4.5. Creating the registration UI | 29:39 | |
| 13 | 4.6. Creating the email verification API endpoint | 08:18 | |
| 14 | 4.7. Creating the email verification UI | 14:44 | |
| 15 | 4.8. Creating the login API endpoint | 07:46 | |
| 16 | 4.9. Creating the login UI | 13:27 | |
| 17 | 4.10. Validating and securing API requests | 14:34 | |
| 18 | 4.11. Persisting users on the UI | 13:55 | |
| 19 | 4.12. Creating protected routes, handling unverified accounts, and allowing logout | 16:08 | |
| 20 | 5.1. Creating the UI homepage skeleton | 22:03 | |
| 21 | 5.2. Creating the link creation API endpoint | 17:38 | |
| 22 | 5.3. Creating a link via the UI | 21:48 | |
| 23 | 5.4. Creating the API endpoint to fetch all links | 04:00 | |
| 24 | 5.5. Retrieving and displaying links in the UI | 09:02 | |
| 25 | 5.6. Creating the link update API endpoint | 06:57 | |
| 26 | 5.7. Supporting link updates in the UI | 10:35 | |
| 27 | 5.8. Creating the link deletion API endpoint | 04:13 | |
| 28 | 5.9. Deleting a link in the UI | 06:42 | |
| 29 | 6.1. Creating the TagSelector component | 21:50 | |
| 30 | 6.2. Supporting tags in the link creation API endpoint | 18:25 | |
| 31 | 6.3. Adding tags to link creation on the UI | 14:17 | |
| 32 | 6.4. Supporting tags in the link update API endpoint | 06:42 | |
| 33 | 6.5. Adding tags to link updates on the UI | 04:38 | |
| 34 | 7.1. Supporting searching and sorting on the API | 03:48 | |
| 35 | 7.2. Searching and sorting links within the UI | 09:29 | |
| 36 | 7.3. Supporting tag filtering on the API | 03:04 | |
| 37 | 7.4. Filtering links by tags on the UI | 08:10 | |
| 38 | 8.1. Installing dependencies and creating starter files | 04:26 | |
| 39 | 8.2. Configuring Webpack for the extension environment | 14:20 | |
| 40 | 8.3. Creating the extension manifest | 07:59 | |
| 41 | 9.1. Setting up the base containers | 05:14 | |
| 42 | 9.2. Injecting a React app using Content Scripts | 14:10 | |
| 43 | 9.3. Supporting extension authentication on the UI and API | 05:58 | |
| 44 | 9.4. Requiring authentication in the extension and leveraging the Storage API | 12:47 | |
| 45 | 9.5. Creating the LinkManager interface | 19:54 | |
| 46 | 9.6. Connecting the LinkManager to the API | 06:42 | |
| 47 | 9.7. Supporting tags within the LinkManager | 08:00 | |
| 48 | 9.8. Deleting saved links and improving the user experience with Context Menus | 10:11 | |
| 49 | 9.9. Creating an Options page for managing extension settings | 21:59 | |
| 50 | 10.1. Deploying the UI | 05:30 | |
| 51 | 10.2. Deploying the API | 06:58 | |
| 52 | 10.3. Preparing and publishing the Chrome Extension | 10:54 | |
| 53 | 11.1. Next steps and enhancement ideas | 02:25 | |
| 54 | 11.2. Wrap up | 00:52 |
Unlock unlimited learning
Get instant access to all 53 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Crash Course: Build a Full-Stack Web App in a Weekend!
Sources: udemy
Do you want to learn the fundamentals of modern web development fast? Do you want to find out if building websites and apps is the right career path for you? Or maybe you just w...
12 hours 13 minutes 30 seconds
Redux
Sources: ui.dev (ex. Tyler McGinnis)
There's no better strategy for learning a new technology than building your own version of it. In this course, we'll take that to the extreme. First, you'll start off by buildin...
7 hours 13 minutes 23 seconds
The Effective Engineer, Pro Package
Sources: Edmond Lau
Designed for those looking for an extra boost in their professional growth. You'll get for your own personal use: the book in PDF, Kindle, and ePub formats; the step-by-step com...
NodeJs: Build The Complete E-Commerce Web API
Sources: udemy
Node.js, or Node, is a runtime environment for executing JavaScript code outside of a browser. It is ideal for building highly-scalable, data-intensive backend services (APIs) t...
5 hours 4 minutes 44 seconds
Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)
Sources: udemy, zerotomastery.io
Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.
39 hours 48 minutes