React TypeScript Chrome Extension Development [2024]

React & TypeScript Chrome Extension Development [2024], available at $94.99, has an average rating of 4.67, with 83 lectures, based on 1189 reviews, and has 8292 subscribers.

You will learn about 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 This course is ideal for individuals who are Anyone curious about learning to build Chrome Extensions using modern web frameworks or Perfect for developers of all skill levels looking to expand their web development skills to Chrome Extensions or If you want to take ONE course to learn everything you need to know about chrome extension development, take this course It is particularly useful for Anyone curious about learning to build Chrome Extensions using modern web frameworks or Perfect for developers of all skill levels looking to expand their web development skills to Chrome Extensions or If you want to take ONE course to learn everything you need to know about chrome extension development, take this course.

Enroll now: React & TypeScript Chrome Extension Development [2024]

Summary

Title: React & TypeScript Chrome Extension Development [2024]

Price: $94.99

Average Rating: 4.67

Number of Lectures: 83

Number of Published Lectures: 83

Number of Curriculum Items: 83

Number of Published Curriculum Objects: 83

Original Price: $19.99

Quality Status: approved

Status: Live

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

Who Should Attend

Anyone curious about learning to build Chrome Extensions using modern web frameworks

Perfect for developers of all skill levels looking to expand their web development skills to Chrome Extensions

If you want to take ONE course to learn everything you need to know about chrome extension development, take this course

Target Audiences

Anyone curious about learning to build Chrome Extensions using modern web frameworks

Perfect for developers of all skill levels looking to expand their web development skills to Chrome Extensions

If you want to take ONE course to learn everything you need to know about chrome extension development, take this course

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

Course Curriculum

Chapter 1: Course Orientation

Lecture 1: Introduction

Lecture 2: Course Overview

Lecture 3: Why build Chrome Extensions?

Chapter 2: Chrome Extension Basics

Lecture 1: Section Overview

Lecture 2: Section Notes

Lecture 3: Editor Setup and Section Resources

Lecture 4: Manifest File

Lecture 5: Popup and Browser Actions

Lecture 6: Options Page

Lecture 7: Chrome Storage API

Lecture 8: Background Scripts and Service Workers

Lecture 9: Chrome Alarms API

Lecture 10: Chrome Notifications API

Lecture 11: Optional: Notification Time Option Feature

Lecture 12: Optional: Start, Stop and Reset Timer Feature

Lecture 13: Optional: Chrome Dev Tools

Chapter 3: Beginner Project: Study Timer Extension

Lecture 1: Section Overview

Lecture 2: Manifest and Popup

Lecture 3: Tasks List Feature Part 1

Lecture 4: Tasks List Feature Part 2

Lecture 5: Timer Feature Part 1

Lecture 6: Timer Feature Part 2

Lecture 7: Options Page

Lecture 8: Styling Part 1

Lecture 9: Styling Part 2

Chapter 4: Data Fetching and More Chrome APIs

Lecture 1: Section Overview

Lecture 2: Section Notes

Lecture 3: Chrome Runtime and Context Menu APIs

Lecture 4: Chrome Search and Tab APIs

Lecture 5: Content Scripts

Lecture 6: Message Passing

Lecture 7: Data Fetching / HTTP Requests

Lecture 8: Optional: Text to Speech API

Chapter 5: TypeScript, React and Webpack Build System

Lecture 1: Section Overview

Lecture 2: Section Notes

Lecture 3: Git and NPM Setup

Lecture 4: TypeScript and React Setup

Lecture 5: Webpack Configuration Setup

Lecture 6: Webpack Plugins Part 1

Lecture 7: Webpack Plugins Part 2

Lecture 8: Webpack CSS Loaders Part 1

Lecture 9: Webpack CSS Loaders Part 2

Lecture 10: Types Definition Libraries

Lecture 11: Webpack Production Mode

Lecture 12: Boilerplate Walkthrough

Chapter 6: Advanced Project: Weather Extension

Lecture 1: Section Overview

Lecture 2: Section Notes

Lecture 3: Open Weather API Part 1

Lecture 4: Open Weather API Part 2

Lecture 5: Material UI Part 1

Lecture 6: Material UI Part 2

Lecture 7: Weather Card

Lecture 8: Popup and Cities Feature Part 1

Lecture 9: Popup and Cities Feature Part 2

Lecture 10: Storage Part 1

Lecture 11: Storage Part 2

Lecture 12: Temperature Scale Feature Part 1

Lecture 13: Temperature Scale Feature Part 2

Lecture 14: Options Page Part 1

Lecture 15: Options Page Part 2

Lecture 16: Overlay Feature Part 1

Lecture 17: Overlay Feature Part 2

Lecture 18: Overlay Feature Part 3

Lecture 19: Overlay Feature Part 4

Lecture 20: Temperature Badge Feature

Lecture 21: Weather Icons

Chapter 7: Final Project: AdBlock Extension

Lecture 1: Section Overview

Lecture 2: Section Notes

Lecture 3: Web Request API Part 1

Lecture 4: Web Request API Part 2

Lecture 5: Declarative Net Request API

Lecture 6: Content Script DOM Blocking

Chapter 8: Chrome Web Store Publishing

Lecture 1: Section Overview

Lecture 2: Section Notes

Lecture 3: Developer Account Setup and Extension Guidelines

Lecture 4: Developer Dashboard Walkthrough

Lecture 5: Optional: Easy Clipboard Extension Analytics

Lecture 6: Optional: Course Final Remarks

Chapter 9: Bonus: Chrome Extension Themes

Lecture 1: Section Overview

Lecture 2: Section Notes

Lecture 3: Manifest File

Lecture 4: Images and Properties

Lecture 5: Colors and Tints

Instructors

Jason Xian
Software Developer

Rating Distribution

1 stars: 7 votes

2 stars: 5 votes

3 stars: 69 votes

4 stars: 289 votes

5 stars: 820 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!