CF

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.

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!

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 76 lessons

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
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

Related courses

Frequently asked questions

What prerequisites do I need before enrolling in this course?
Before enrolling in this course, you should have a basic understanding of JavaScript and HTML/CSS. Familiarity with React and TypeScript will be beneficial since the course heavily focuses on these technologies for building Chrome extensions. No prior experience with Chrome extension development is required as the course starts with fundamental concepts like the Manifest file and Chrome APIs.
What will I build during the course?
Throughout the course, you will build various features for Chrome extensions, such as a Popup and Browser Actions, Options Pages, and a Tasks List. You will also implement advanced functionalities like the Timer Feature and Weather Card using external APIs like the Open Weather API. The course concludes with creating a complete extension that utilizes the Chrome Storage API and Material UI for styling.
Who is the target audience for this course?
The course is designed for web developers who want to extend their skill set to include Chrome extension development. It is ideal for those already familiar with web technologies like JavaScript, HTML/CSS, React, and TypeScript, who wish to apply these skills to a new and practical domain. Beginners in web development might find the content challenging without prior experience.
How does this course differ from other Chrome extension courses?
This course focuses on using modern web technologies such as React, TypeScript, and Webpack to build Chrome extensions, providing a bridge between web development and extension development. Unlike other courses that may rely solely on vanilla JavaScript, this course emphasizes transferable skills that are applicable to general web development projects, making it unique in its approach.
What specific tools and platforms will I learn to use?
You will learn to use several important tools and platforms, including React for building user interfaces, TypeScript for type-safe programming, and Webpack for module bundling. The course also covers Chrome-specific APIs like Storage, Notifications, and Alarms, as well as integrating third-party services through APIs such as the Open Weather API.
What topics are not covered in this course?
The course does not cover topics outside of Chrome extension development, such as mobile app development or server-side programming. It is specifically focused on client-side technologies and does not delve into non-web-based extension platforms or non-Chrome browsers, ensuring a clear focus on building Chrome extensions using modern web technologies.
What is the expected time commitment for this course?
With a total of 76 lessons, the course requires a significant time commitment. Although the total runtime is not specified, students should plan to spend additional time on practical exercises and reviewing the material. Depending on your pace, expect to dedicate several weeks to complete the course, especially if you engage deeply with the optional features and exercises.