React & TypeScript Chrome Extension Development [2021]

8h 52m 35s
English
Paid

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

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online React & TypeScript Chrome Extension Development [2021]

0:00
/
#1: Introduction

All Course Lessons (76)

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Learn React 19 with Epic React v2

Learn React 19 with Epic React v2

Sources: Kent C. Dodds
Ready for the React 19 revolution? The most in-demand JavaScript framework has received a major update! You are already familiar with React, but in React 19 the
26 hours 51 minutes 3 seconds
Master Spring Boot 3 & Spring Framework 6 with Java

Master Spring Boot 3 & Spring Framework 6 with Java

Sources: udemy
This is THE COURSE you need to learn everything you need to know about building real world Java applications and deploying them to the cloud using Spring and Spring Boot Framewo...
37 hours 34 minutes 14 seconds
Crash Course: Build a Full-Stack Web App in a Weekend!

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