React & TypeScript Chrome Extension Development [2023]

Learn Google Chrome Extension development using modern web frameworks. JavaScript, React, TypeScript, Webpack and more!

4.59 (1094 reviews)
Udemy
platform
English
language
Web Development
category
instructor
React & TypeScript Chrome Extension Development [2023]
7,509
students
9 hours
content
Jan 2023
last update
$94.99
regular price

What you will learn

The ins and outs of modern Chrome Extension development

Learn to use the newest Manifest Version 3 Chrome APIs

Standard extension development in basic HTML, CSS and JavaScript and modern development in React and TypeScript

Using HTTP requests in your chrome extensions to interact with third party APIs

Create a study focus timer extension built in simple JavaScript, HTML and CSS

Build a multi-featured weather extension built in React, TypeScript and Webpack

Design a build system for developing extensions using Webpack

Build user interfaces using popular component libraries like Material UI

Deploying your completed extension to the Chrome Web Store for real users

Work with simple command line tools such as Git and NPM

Design an ad blocker extension that covers the basic principles of ad blocking

Build a mini TV show search extension and text-to-speech extension

Bonus mini-section covering the basics of Chrome Extension themes

Description

Hi! Welcome to the comprehensive Chrome Extension Development course using modern web frameworks in 2023. 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

  • Building three large extension projects step-by-step from scratch

  • Using design system component libraries like Material UI to build beautiful UIs quickly

  • Data fetching using HTTP requests to third party APIs

  • Deploying your completed extension to the Chrome Web Store for real users

  • Basic usage of Git and NPM on the command line

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!

Content

Course Orientation

Introduction
Course Overview
Why build Chrome Extensions?

Chrome Extension Basics

Section Overview
Section Notes
Editor Setup and Section Resources
Manifest File
Popup and Browser Actions
Options Page
Chrome Storage API
Background Scripts and Service Workers
Chrome Alarms API
Chrome Notifications API
Optional: Notification Time Option Feature
Optional: Start, Stop and Reset Timer Feature
Optional: Chrome Dev Tools

Beginner Project: Study Timer Extension

Section Overview
Manifest and Popup
Tasks List Feature Part 1
Tasks List Feature Part 2
Timer Feature Part 1
Timer Feature Part 2
Options Page
Styling Part 1
Styling Part 2

Data Fetching and More Chrome APIs

Section Overview
Section Notes
Chrome Runtime and Context Menu APIs
Chrome Search and Tab APIs
Content Scripts
Message Passing
Data Fetching / HTTP Requests
Optional: Text to Speech API

TypeScript, React and Webpack Build System

Section Overview
Section Notes
Git and NPM Setup
TypeScript and React Setup
Webpack Configuration Setup
Webpack Plugins Part 1
Webpack Plugins Part 2
Webpack CSS Loaders Part 1
Webpack CSS Loaders Part 2
Types Definition Libraries
Webpack Production Mode
Boilerplate Walkthrough

Advanced Project: Weather Extension

Section Overview
Section Notes
Open Weather API Part 1
Open Weather API Part 2
Material UI Part 1
Material UI Part 2
Weather Card
Popup and Cities Feature Part 1
Popup and Cities Feature Part 2
Storage Part 1
Storage Part 2
Temperature Scale Feature Part 1
Temperature Scale Feature Part 2
Options Page Part 1
Options Page Part 2
Overlay Feature Part 1
Overlay Feature Part 2
Overlay Feature Part 3
Overlay Feature Part 4
Temperature Badge Feature
Weather Icons

Final Project: AdBlock Extension

Section Overview
Section Notes
Web Request API Part 1
Web Request API Part 2
Declarative Net Request API
Content Script DOM Blocking

Chrome Web Store Publishing

Section Overview
Section Notes
Developer Account Setup and Extension Guidelines
Developer Dashboard Walkthrough
Optional: Easy Clipboard Extension Analytics
Optional: Course Final Remarks

Bonus: Chrome Extension Themes

Section Overview
Section Notes
Manifest File
Images and Properties
Colors and Tints

Reviews

Chibuzor
September 24, 2023
I am yet to complete this course, and It is not only enjoyable, it is well structured. Many thanks to the Instructor, The course is very practical and It won't bore you.
David
September 7, 2023
Early in the course, everything builds on the Options Page which has been deprecated, how can this course be called 2023. It is not up-to-date and loses the student at the 9th video.
Robin
September 2, 2023
Well structured course. I've learned a lot from taking this. I'm glad I went through it. I'm looking forward to Jason making other courses on various topics.
Cristian
September 1, 2023
The pace is a bit hard to follow and things are not explained very well. We are moving too fast from one window to another without explaining what we are doing. But the knowledge having someone walk you through something new is very useful.
Grace
August 27, 2023
Pleasant surprise. Even the unexpected css part. Instructor says he's not a designer, but it's not designing super advanced fancy UIs for the beginner. I really appreciated how he went step by step, adding one css rule after another, showing how it affects the UI (by adding first directly in the browser console), and explaining along the way. I've only completed the first project so far, but felt compelled to leave this review. Very young, very promising instructor. Hope he puts out more courses in the future! I think it doesn't matter what he teaches. At this point, I'm sold. What stands out about this course is, I feel like I'm actually really learning. Thank you.
Anneliese
August 25, 2023
I don't think you really take enough time to explain WHY you do things. It's more like watching someone code vs. going into what certain things do and why the program is structured one way vs another.
Klarwork
July 3, 2023
You had spoken very fast and done a lot of things too fast. My brain can barely absorb and analyze the information and it make me crazy. So, I have t play & pause all videos. Please slow it down. ?
Matías
June 27, 2023
Pretty good, goes through pretty much all the basics about making an extension. I had a project in mind before starting this course, and by the end of it, I feel like I learned most of the tools I will need. I specially appreciate the AdBlock part of this course, I found it quite interesting.
Konstantinos
June 17, 2023
best udemy course by far, clean English very informative and good explanation, and i love that every section have all the source you need so you can study deeper by yourself
Keshev
May 19, 2023
I’ve taken 4 chrome extension courses (not fully, just an hour before looking for something better). Some on udemy and some on skillshare. This is the best one by a mile.
Brennan
April 13, 2023
The instructor clarifies for us how to use Webpack, all the different features of Chrome extensions, and where to find what we need in the documentation.
Anthony
March 28, 2023
one of the best courses I have taken on Udemy, great not just for learning chrome extensions but also get some practice with js, typescript and react. 10/10 would recommend
Tran
March 21, 2023
What a great course. I have learned a lot on permissions, manifest.json and the overall chrome apis. It has given me the confidence to make an extension for myself. Thank you Jason.
Benjamin
March 13, 2023
The best resource that I've found for learning chrome extension development. I absolutely recommend. *Update: After finishing the course, I still have to say that this is the best resource for learning to develop chrome extensions. With that, some feedback for Jason would be that in future tutorials that you might make, it would be helpful if you provided more details when directing us to add new code. For example, if you want us to add a new function, instead of just saying "let's add a myFunc function", it would be helpful to say "let's add a myFunc function. We should put this right below the randomFunc1 function, before the randomFunc2 function". This could be applied to imports as well or just in general any time you are going to move the cursor. I found myself getting a bit lost during the weatherApp extension buildout as the code got more complex. Brad Traversy does a really good job in his courses of providing this type of detail when moving the cursor. Anyway, great course here, Thank you Jason!
AMAN
March 11, 2023
One of the best course ever seen. All points are well explained along with demo projects. This course is really worth for both money and time.

Charts

Price

React & TypeScript Chrome Extension Development [2023] - Price chart

Rating

React & TypeScript Chrome Extension Development [2023] - Ratings chart

Enrollment distribution

React & TypeScript Chrome Extension Development [2023] - Distribution chart
3925774
udemy ID
3/19/2021
course created date
5/26/2021
course indexed date
Bot
course submited by