React & TypeScript Chrome Extension Development [2021]
Course description
Hi! Welcome to the comprehensive Chrome Extension Development course using modern web frameworks in 2021. This is the only course on Udemy that is focused on building extensions using modern technologies like TypeScript, React and Webpack along with standard JavaScript and HTML/CSS development. Using popular frameworks means that the skills you learn in this course building extensions will be transferrable to general web software development.
Read more about the course
The course is designed flexibly for students of all levels, covering everything from the very basics of extensions to more exciting new technologies! The first part of the course is designed to help you hit the ground running so that you can develop your very first extension within the first hour of the course. Then, we begin introducing more advanced concepts, technologies and projects to supercharge your extension development skills.
Throughout the course we cover a ton of concepts and technologies:
Comprehensive overview of the fundamentals behind Chrome Extensions
Building extensions using the standard approach with JavaScript, HTML and CSS
Designing a Webpack build system to enable the use of React and TypeScript in your extension
Basic usage of Git and NPM on the command line
Using design system component libraries like Material UI to build beautiful UIs quickly
Building three large extension projects step-by-step from scratch
Data fetching using HTTP requests to third party APIs
Deploying your completed extension to the Chrome Web Store for real users
If you have any additional questions, please let me know. I'm always happy to help!
Register today to see what modern Chrome Extension development can look like!
Watch Online
All Course Lessons (76)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 03:10 | |
| 2 | Course Overview | 03:51 | |
| 3 | Why build Chrome Extensions? | 01:51 | |
| 4 | Section Overview | 00:59 | |
| 5 | Editor Setup and Section Resources | 03:08 | |
| 6 | Manifest File | 05:19 | |
| 7 | Popup and Browser Actions | 09:09 | |
| 8 | Options Page | 05:11 | |
| 9 | Chrome Storage API | 09:05 | |
| 10 | Background Scripts and Service Workers | 06:51 | |
| 11 | Chrome Alarms API | 08:26 | |
| 12 | Chrome Notifications API | 04:12 | |
| 13 | Optional: Notification Time Option Feature | 04:16 | |
| 14 | Optional: Start, Stop and Reset Timer Feature | 04:20 | |
| 15 | Optional: Chrome Dev Tools | 03:06 | |
| 16 | Section Overview | 02:15 | |
| 17 | Manifest and Popup | 06:35 | |
| 18 | Tasks List Feature Part 1 | 08:40 | |
| 19 | Tasks List Feature Part 2 | 07:30 | |
| 20 | Timer Feature Part 1 | 12:34 | |
| 21 | Timer Feature Part 2 | 12:07 | |
| 22 | Options Page | 12:41 | |
| 23 | Styling Part 1 | 09:36 | |
| 24 | Styling Part 2 | 09:55 | |
| 25 | Section Overview | 00:53 | |
| 26 | Chrome Runtime and Context Menu APIs | 07:54 | |
| 27 | Chrome Search and Tab APIs | 06:23 | |
| 28 | Content Scripts | 09:57 | |
| 29 | Message Passing | 10:51 | |
| 30 | Data Fetching / HTTP Requests | 11:12 | |
| 31 | Optional: Text to Speech API | 03:14 | |
| 32 | Section Overview | 01:49 | |
| 33 | Git and NPM Setup | 05:31 | |
| 34 | TypeScript and React Setup | 07:28 | |
| 35 | Webpack Configuration Setup | 08:11 | |
| 36 | Webpack Plugins Part 1 | 07:55 | |
| 37 | Webpack Plugins Part 2 | 04:26 | |
| 38 | Webpack CSS Loaders Part 1 | 05:57 | |
| 39 | Webpack CSS Loaders Part 2 | 06:06 | |
| 40 | Types Definition Libraries | 09:44 | |
| 41 | Webpack Production Mode | 08:02 | |
| 42 | Boilerplate Walkthrough | 11:30 | |
| 43 | Section Overview | 03:11 | |
| 44 | Open Weather API Part 1 | 11:24 | |
| 45 | Open Weather API Part 2 | 08:19 | |
| 46 | Material UI Part 1 | 08:14 | |
| 47 | Material UI Part 2 | 07:03 | |
| 48 | Weather Card | 07:16 | |
| 49 | Popup and Cities Feature Part 1 | 10:24 | |
| 50 | Popup and Cities Feature Part 2 | 10:33 | |
| 51 | Storage Part 1 | 07:09 | |
| 52 | Storage Part 2 | 05:49 | |
| 53 | Temperature Scale Feature Part 1 | 08:26 | |
| 54 | Temperature Scale Feature Part 2 | 08:24 | |
| 55 | Options Page Part 1 | 09:33 | |
| 56 | Options Page Part 2 | 10:59 | |
| 57 | Overlay Feature Part 1 | 10:02 | |
| 58 | Overlay Feature Part 2 | 09:51 | |
| 59 | Overlay Feature Part 3 | 07:22 | |
| 60 | Overlay Feature Part 4 | 05:28 | |
| 61 | Temperature Badge Feature | 11:39 | |
| 62 | Weather Icons | 11:43 | |
| 63 | Section Overview | 01:10 | |
| 64 | Web Request API Part 1 | 12:38 | |
| 65 | Web Request API Part 2 | 06:15 | |
| 66 | Declarative Net Request API | 10:29 | |
| 67 | Content Script DOM Blocking | 10:43 | |
| 68 | Section Overview | 00:53 | |
| 69 | Developer Account Setup and Extension Guidelines | 04:08 | |
| 70 | Developer Dashboard Walkthrough | 13:48 | |
| 71 | Optional: Easy Clipboard Extension Analytics | 06:17 | |
| 72 | Optional: Course Final Remarks | 00:31 | |
| 73 | Section Overview | 00:49 | |
| 74 | Manifest File | 02:08 | |
| 75 | Images and Properties | 03:46 | |
| 76 | Colors and Tints | 04:21 |
Unlock unlimited learning
Get instant access to all 75 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
3D Computer Graphics Programming
TypeScript Simplified
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
Replit Agent
