English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 54 Lessons (10h 3m) | 1.56 GB
Master the art of building production-ready, full-stack Chrome Extensions using modern web technologies and best practices. Learn how to build a powerful, feature-rich extension that seamlessly integrates with a separate React UI and communicates with a shared Node.js API.
This course is everything I wish I knew when I started building Chrome Extensions almost a decade ago
This project-based course guides you through building a functional Chrome extension with a modern tech stack. We’ll dive into advanced Chrome Extension concepts, set up permissions and authentication, structure a secure & scalable API with Node.js, and design a user-friendly React interface. By the end, you’ll have a polished extension to showcase and the skills to build / deploy full-stack Chrome extensions for any project or client.
Some of the major topics covered include:
- Building a UI using React and an API using Node.js / Express
- Building a Chrome Extension that communicates with the UI and API
- User authentication at the extension, UI, and API level
- Advanced extension developement concepts (such as injecting React apps into webpages via Content Scripts)
- Leveraging numerous Chrome Extension APIs (Actions API, Tabs API, and more) to create a seamless user experience
- Deploying and publishing extensions, UIs, and APIs
- And much more!
We’ll also use a variety of tools, libraries, and technologies throughout the course:
Tools such as Docker, MongoDB Compass, Mailtrap, Postman, and more
Libraries and technologies such as React, Node.js, Express, MongoDB, Vite, Styled Components, Nodemailer, and more
What are we going to build?
In this course, we’ll build a feature-rich Chrome extension inspired by Pocket, where users can save, update, delete, and tag links for easy organization and retrieval. This full-stack project includes both frontend and backend development: a UI and extension both built with React, as well as a Node.js/Express backend API with MongoDB for managing link storage, updates, and retrieval. Users will also be authenticated at all 3 levels.
We’ll follow best practices for building scalable, maintainable UIs and APIs, and the extension component will incorporate advanced design patterns like authentication, preparing you to build sophisticated, production-ready extensions on your own.
Table of Contents
1 Welcome project preview
2 Environment tool setup
3 Using the project files
4 Creating the React app structure and installing dependencies
5 Setting up theming routes_ and context
6 Creating the Dockerfile and installing dependencies
7 Setting up base app structure
8 Creating the registration API endpoint
9 Sending emails with nodemailer
10 Communicating between the UI and API
11 Building reusable base components
12 Creating the registration UI
13 Creating the email verification API endpoint
14 Creating the email verification UI
15 Creating the login API endpoint
16 Creating the login UI
17 Validating and securing API requests
18 Persisting users on the UI
19 Creating protected routes_ handling unverified accounts_ and allowing logout
20 Creating the UI homepage skeleton
21 Creating the link creation API endpoint
22 Creating a link via the UI
23 Creating the API endpoint to fetch all links
24 Retrieving and displaying links in the UI
25 Creating the link update API endpoint
26 Supporting link updates in the UI
27 Creating the link deletion API endpoint
28 Deleting a link in the UI
29 Creating the TagSelector component
30 Supporting tags in the link creation API endpoint
31 Adding tags to link creation on the UI
32 Supporting tags in the link update API endpoint
33 Adding tags to link updates on the UI
34 Supporting searching and sorting on the API
35 Searching and sorting links within the UI
36 Supporting tag filtering on the API
37 Filtering links by tags on the UI
38 Installing dependencies and creating starter files
39 Configuring Webpack for the extension environment
40 Creating the extension manifest
41 Setting up the base containers
42 Injecting a React app using Content Scripts
43 Supporting extension authentication on the UI and API
44 Requiring authentication in the extension and leveraging the Storage API
45 Creating the LinkManager interface
46 Connecting the LinkManager to the API
47 Supporting tags within the LinkManager
48 Deleting saved links and improving the user experience with Context Menus
49 Creating an Options page for managing extension settings
50 Deploying the UI
51 Deploying the API
52 Preparing and publishing the Chrome Extension
53 Next steps and enhancement ideas
54 Wrap up
Resolve the captcha to access the links!