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.
React & TypeScript Chrome Extension Development [2021]
8h 52m 35s
English
Free
React & TypeScript Chrome Extension Development [2021] is a 76-lesson 8 hours 52 minutes self-paced course by Udemy. Hi!
Course facts
- Lessons
- 76
- Duration
- 8 hours 52 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Udemy
- Price
- Free
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!
Who teaches React & TypeScript Chrome Extension Development [2021]? Udemy
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.
What lessons are included in React & TypeScript Chrome Extension Development [2021]?
- Space or K: play or pause
- J: rewind 10 seconds
- L: forward 10 seconds
- Left Arrow: rewind 5 seconds
- Right Arrow: forward 5 seconds
- Up Arrow: volume up
- Down Arrow: volume down
- M: mute or unmute
- F: toggle fullscreen
- T: toggle theater mode
- I: toggle mini player
- 0 to 9: seek to 0 to 90 percent of the video
- Shift plus N: next video
- Shift plus P: previous video
0:00 0:00
| # | Lesson 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 |
What courses are similar to React & TypeScript Chrome Extension Development [2021]?
-
Updated 2y agoBuild a Notion Clone with React and TypeScript
By: Zero To MasteryMaster React and TypeScript by building a Notion clone. Learn to use Vite for project setup and Supabase for database management. Showcase your skills with a7h 57m5/5 -
Updated 3y agoThe Creative React and Redux Course
By: Dev EdThis course will teach you everything you need to know about React. Get started now with 0 experience in React, we will take it step by step from the beginning18h 13m -
Updated 2y agoThe Ultimate React Course 2024: React, Redux & More
By: UdemyIn 2024, React is still the #1 skill to learn if you want to become a successful front-end developer! But it can be hard. There are so many moving parts, so ma83h 56m5/5 -
Updated 2y agoBuild a Spotify Connected App
By: Fullstack.ioLearn how to build a full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.3h 47m5/5 -
ClassicTypeScript Pro Essentials
By: Matt PocockReady to elevate your TypeScript skills? You may have dabbled with TypeScript, but you might feel you're missing something crucial.11h 2m5/5 -
Updated 2y agoScale React Development with Nx
By: egghead.ioOn the surface, starting a project sounds easy. First you make some directories, install some dependencies, then you write some code. But there's a bit more to1h 34m
More courses by Udemy
-
Updated 1mo agoReact - The Complete Guide
React: The Complete Guide by Maximilian Schwarzmüller — original 2022 edition covering React hooks, Redux, Context API, Next.js basics.47h 42m5/5 -
Updated 3y agoComplete C# Unity Game Developer 3D
This is the long-awaited sequel to the Complete Unity Developer - one of the most popular e-learning courses on the internet!30h 34m -
Updated 3y agoNest.js Microservices: Build & Deploy a Scaleable Backend
Nest.js is an incredible backend framework that allows us to build scaleable Nodejs backends with very little complexity. A Microservice architecture is a popul5h 39m5/5 -
Updated 3y agoThe HTML & CSS Bootcamp 2023 Edition
Brand new HTML & CSS course, just released in February 2023 Check out the promo video to see the beautiful, responsive projects we build in this course!37h 18m5/5 -
Updated 3y agoMicroservices with Node JS and React
Event-Based Architecture? Covered! Server side rendering with React? Yep. Scalable, production-ready code? Its here!54h 13m5/5 -
FreeClassic100 Days of Code - The Complete Python Pro Bootcamp for 2023
Watch the 100 Days of Code Python Pro Bootcamp free: 100 daily projects covering Python basics, web scraping, data science, automation and GUI apps.58h 35m5/5
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.