Chrome Extension Mastery: Build Full-Stack Extensions with React & Node.js

Name: Chrome Extension Mastery: Build Full-Stack Extensions with React & Node.js
Price: 9 USD
Availability: InStock

10h 3m 45s

English

Paid

February 28, 2025

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 Chrome Extension Mastery: Build Full-Stack Extensions with React & Node.js

Join premium to watch

Go to premium

#	Title	Duration
1	1.1. Welcome & project preview	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