React & TypeScript Chrome Extension Development [2021]

8h 52m 35s
English
Paid

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 React & TypeScript Chrome Extension Development [2021]

Join premium to watch
Go to premium
# Title Duration
1 Introduction 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

Similar courses to React & TypeScript Chrome Extension Development [2021]

Laravel with React JS - Build Twitter Like Real Time Web App

Laravel with React JS - Build Twitter Like Real Time Web Appudemy

Category: React.js, Laravel
Duration 4 hours 56 minutes 37 seconds
Macroeconomics Made Clear

Macroeconomics Made ClearWondrium by The Great CoursesAkila Weerapana

Category: Others
Duration 12 hours 34 minutes 14 seconds
Practical TLS

Practical TLSPractical Networking (practicalnetworking.net)

Category: Others
Duration 13 hours 24 minutes 49 seconds
Recorded Live Business Calls

Recorded Live Business CallsProdigies University

Category: Others
Duration 31 hours 36 minutes 15 seconds
Advanced Distributed Systems Design

Advanced Distributed Systems DesignUdi Dahan

Category: Others
Duration 32 hours 22 minutes 8 seconds
MERN Stack Web Development with Ultimate Authentication

MERN Stack Web Development with Ultimate Authenticationudemy

Category: React.js, Node.js, MongoDB
Duration 9 hours 24 minutes 59 seconds
MERN Stack From Scratch

MERN Stack From ScratchBrad Traversy

Category: React.js, Node.js, MongoDB
Duration 13 hours 32 minutes 38 seconds
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPTudemy

Category: TypeScript, React.js, Next.js
Duration 6 hours 52 minutes 28 seconds
Understanding React | Don’t Imitate Understand

Understanding React | Don’t Imitate UnderstandAnthony Alicea

Category: React.js
Duration 17 hours 3 minutes 45 seconds