Skip to main content

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 54 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1.1. Welcome & project preview

All Course Lessons (54)

#Lesson TitleDurationAccess
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 subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Introduction to Prompt Engineering

Introduction to Prompt Engineering

Sources: DAIR.AI
This course is dedicated to the key methods of Prompt Engineering for large language models (LLMs) and their effective application in various scenarios and...
1 hour 27 minutes 29 seconds
React Query

React Query

Sources: ui.dev (ex. Tyler McGinnis)
Learn React Query with the official React Query course. WANT TO SKIP THE DOCS? There’s an easier way to master React Query. Our linear course is like having a smart, experienced...
7 hours 1 minute 30 seconds
Understanding React | Don’t Imitate Understand

Understanding React | Don’t Imitate Understand

Sources: Anthony Alicea
Even if you've been using React for years, your mental model is likely inaccurate. That's because the best mental model is understanding how something really wo
17 hours 3 minutes 45 seconds
The Software Architect Mindset (COMPLETE)

The Software Architect Mindset (COMPLETE)

Sources: ArjanCodes
The course "The Software Architect Mindset" teaches the fundamentals of software architecture and provides practical advice on creating software products...
12 hours 6 minutes 39 seconds
Systems Design Fundamentals

Systems Design Fundamentals

Sources: algoexpert
The most important ingredient to success in systems design interviews is having extensive knowledge in the areas of distributed computing, reliability engineering, information s...
10 hours 2 minutes 52 seconds