React & TypeScript Chrome Extension Development [2021]

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course Description

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!

Who this course is for:

  • 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

Instructor

Software Developer
  • 4.7 Instructor Rating
  • 76 Reviews
  • 472 Students
  • 1 Course

Hey everyone! I'm Jason, an avid software developer focused on building awesome full-stack web products. In the past I have worked professionally as a software developer at big tech companies such as Facebook.

My goal is to share the fun and excitement of software development with you and to help you build real-world development skills through comprehensive, project focused courses.

Expected Outcomes

  1. The ins and outs of Chrome Extension development in 2021 Deploying your completed extension to the Chrome Web Store for real users Standard extension development in basic HTML, CSS and JavaScript and modern development in React and TypeScript Design a build system for developing extensions using Webpack Build user interfaces using popular component libraries like Material UI Using HTTP requests in your chrome extensions to interact with third party APIs Work with simple command line tools such as Git and NPM Learn to use Manifest Version 3 Chrome APIs, newly released in 2021 Build a multi-featured weather extension built in React, TypeScript and Webpack Design an ad blocker extension that covers the basic principles of ad blocking Create a study focus timer extension built in simple JavaScript, HTML and CSS Build a mini TV show search extension and text-to-speech extension Bonus mini-section covering the basics of Chrome Extension themes Show more Show less Course content 9 sections • 83 lectures • 8h 52m total length Expand all sections Course Orientation 3 lectures • 9min Introduction Preview 03:09 Course Overview Preview 03:50 Why build Chrome Extensions? Preview 01:50 Chrome Extension Basics 13 lectures • 1hr 4min Section Overview 00:58 Section Notes 00:06 Editor Setup and Section Resources 03:07 Manifest File Preview 05:18 Popup and Browser Actions 09:08 Options Page 05:09 Chrome Storage API 09:04 Background Scripts and Service Workers 06:50 Chrome Alarms API 08:25 Chrome Notifications API 04:11 Optional: Notification Time Option Feature 04:15 Optional: Start, Stop and Reset Timer Feature 04:19 Optional: Chrome Dev Tools 03:05 Beginner Project: Study Timer Extension 9 lectures • 1hr 22min Section Overview 02:14 Manifest and Popup 06:34 Tasks List Feature Part 1 08:39 Tasks List Feature Part 2 07:29 Timer Feature Part 1 12:33 Timer Feature Part 2 12:06 Options Page 12:40 Styling Part 1 09:35 Styling Part 2 09:54 Data Fetching and More Chrome APIs 8 lectures • 51min Section Overview 00:52 Section Notes 00:14 Chrome Runtime and Context Menu APIs 07:53 Chrome Search and Tab APIs 06:22 Content Scripts 09:56 Message Passing 10:50 Data Fetching / HTTP Requests 11:11 Optional: Text to Speech API 03:13 TypeScript, React and Webpack Build System 12 lectures • 1hr 17min Section Overview 01:48 Section Notes 00:09 Git and NPM Setup 05:30 TypeScript and React Setup 07:27 Webpack Configuration Setup 08:10 Webpack Plugins Part 1 07:54 Webpack Plugins Part 2 04:25 Webpack CSS Loaders Part 1 05:56 Webpack CSS Loaders Part 2 06:05 Types Definition Libraries 09:43 Webpack Production Mode 08:01 Boilerplate Walkthrough 11:29 Advanced Project: Weather Extension 21 lectures • 2hr 53min Section Overview 03:10 Section Notes 00:12 Open Weather API Part 1 11:23 Open Weather API Part 2 08:18 Material UI Part 1 08:12 Material UI Part 2 07:02 Weather Card 07:14 Popup and Cities Feature Part 1 10:23 Popup and Cities Feature Part 2 10:32 Storage Part 1 07:08 Storage Part 2 05:48 Temperature Scale Feature Part 1 08:25 Temperature Scale Feature Part 2 08:23 Options Page Part 1 09:32 Options Page Part 2 10:57 Overlay Feature Part 1 10:00 Overlay Feature Part 2 09:50 Overlay Feature Part 3 07:21 Overlay Feature Part 4 05:27 Temperature Badge Feature 11:38 Weather Icons 11:42 Final Project: AdBlock Extension 6 lectures • 41min Section Overview 01:09 Section Notes 00:07 Web Request API Part 1 12:37 Web Request API Part 2 06:14 Declarative Net Request API 10:28 Content Script DOM Blocking 10:42 Chrome Web Store Publishing 6 lectures • 26min Section Overview 00:52 Section Notes 00:03 Developer Account Setup and Extension Guidelines 04:06 Developer Dashboard Walkthrough 13:47 Optional: Easy Clipboard Extension Analytics 06:16 Optional: Course Final Remarks 00:30 Bonus: Chrome Extension Themes 5 lectures • 11min Section Overview 00:48 Section Notes 00:02 Manifest File 02:07 Images and Properties 03:45 Colors and Tints 04:20 Requirements Basic understanding of JavaScript, HTML, CSS for standard extension development Basic knowledge of React for modern frameworks section Description 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! Who this course is for: 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 Show more Show less Instructor Jason Xian Software Developer 4.7 Instructor Rating 76 Reviews 472 Students 1 Course Hey everyone! I'm Jason, an avid software developer focused on building awesome full-stack web products. In the past I have worked professionally as a software developer at big tech companies such as Facebook. My goal is to share the fun and excitement of software development with you and to help you build real-world development skills through comprehensive, project focused courses. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'67789be9bc8553df',m:'1805073cc29bd522238bb46e68e45aaea2294434-1627753198-1800-AZ4YmPhFNjcGQGjSZOM3CCKYt/vlPRuwUO8Mo5aPzLuJ91CqXHOyDAW0qbo+3Wh5GvhNqf5wRXpmEomGyfnjMiSEn0oHZZgEwt69lMB1mmtydORqjes61NSkzRp435zla/dSRBRP21/U4QyDeq0ZrcY=',s:[0x05e4853420,0x26241a6002],}})();
  2. Deploying your completed extension to the Chrome Web Store for real users Standard extension development in basic HTML, CSS and JavaScript and modern development in React and TypeScript Design a build system for developing extensions using Webpack Build user interfaces using popular component libraries like Material UI Using HTTP requests in your chrome extensions to interact with third party APIs Work with simple command line tools such as Git and NPM Learn to use Manifest Version 3 Chrome APIs, newly released in 2021 Build a multi-featured weather extension built in React, TypeScript and Webpack Design an ad blocker extension that covers the basic principles of ad blocking Create a study focus timer extension built in simple JavaScript, HTML and CSS Build a mini TV show search extension and text-to-speech extension Bonus mini-section covering the basics of Chrome Extension themes Show more Show less Course content 9 sections • 83 lectures • 8h 52m total length Expand all sections Course Orientation 3 lectures • 9min Introduction Preview 03:09 Course Overview Preview 03:50 Why build Chrome Extensions? Preview 01:50 Chrome Extension Basics 13 lectures • 1hr 4min Section Overview 00:58 Section Notes 00:06 Editor Setup and Section Resources 03:07 Manifest File Preview 05:18 Popup and Browser Actions 09:08 Options Page 05:09 Chrome Storage API 09:04 Background Scripts and Service Workers 06:50 Chrome Alarms API 08:25 Chrome Notifications API 04:11 Optional: Notification Time Option Feature 04:15 Optional: Start, Stop and Reset Timer Feature 04:19 Optional: Chrome Dev Tools 03:05 Beginner Project: Study Timer Extension 9 lectures • 1hr 22min Section Overview 02:14 Manifest and Popup 06:34 Tasks List Feature Part 1 08:39 Tasks List Feature Part 2 07:29 Timer Feature Part 1 12:33 Timer Feature Part 2 12:06 Options Page 12:40 Styling Part 1 09:35 Styling Part 2 09:54 Data Fetching and More Chrome APIs 8 lectures • 51min Section Overview 00:52 Section Notes 00:14 Chrome Runtime and Context Menu APIs 07:53 Chrome Search and Tab APIs 06:22 Content Scripts 09:56 Message Passing 10:50 Data Fetching / HTTP Requests 11:11 Optional: Text to Speech API 03:13 TypeScript, React and Webpack Build System 12 lectures • 1hr 17min Section Overview 01:48 Section Notes 00:09 Git and NPM Setup 05:30 TypeScript and React Setup 07:27 Webpack Configuration Setup 08:10 Webpack Plugins Part 1 07:54 Webpack Plugins Part 2 04:25 Webpack CSS Loaders Part 1 05:56 Webpack CSS Loaders Part 2 06:05 Types Definition Libraries 09:43 Webpack Production Mode 08:01 Boilerplate Walkthrough 11:29 Advanced Project: Weather Extension 21 lectures • 2hr 53min Section Overview 03:10 Section Notes 00:12 Open Weather API Part 1 11:23 Open Weather API Part 2 08:18 Material UI Part 1 08:12 Material UI Part 2 07:02 Weather Card 07:14 Popup and Cities Feature Part 1 10:23 Popup and Cities Feature Part 2 10:32 Storage Part 1 07:08 Storage Part 2 05:48 Temperature Scale Feature Part 1 08:25 Temperature Scale Feature Part 2 08:23 Options Page Part 1 09:32 Options Page Part 2 10:57 Overlay Feature Part 1 10:00 Overlay Feature Part 2 09:50 Overlay Feature Part 3 07:21 Overlay Feature Part 4 05:27 Temperature Badge Feature 11:38 Weather Icons 11:42 Final Project: AdBlock Extension 6 lectures • 41min Section Overview 01:09 Section Notes 00:07 Web Request API Part 1 12:37 Web Request API Part 2 06:14 Declarative Net Request API 10:28 Content Script DOM Blocking 10:42 Chrome Web Store Publishing 6 lectures • 26min Section Overview 00:52 Section Notes 00:03 Developer Account Setup and Extension Guidelines 04:06 Developer Dashboard Walkthrough 13:47 Optional: Easy Clipboard Extension Analytics 06:16 Optional: Course Final Remarks 00:30 Bonus: Chrome Extension Themes 5 lectures • 11min Section Overview 00:48 Section Notes 00:02 Manifest File 02:07 Images and Properties 03:45 Colors and Tints 04:20 Requirements Basic understanding of JavaScript, HTML, CSS for standard extension development Basic knowledge of React for modern frameworks section Description 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! Who this course is for: 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 Show more Show less Instructor Jason Xian Software Developer 4.7 Instructor Rating 76 Reviews 472 Students 1 Course Hey everyone! I'm Jason, an avid software developer focused on building awesome full-stack web products. In the past I have worked professionally as a software developer at big tech companies such as Facebook. My goal is to share the fun and excitement of software development with you and to help you build real-world development skills through comprehensive, project focused courses. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'67789be9bc8553df',m:'1805073cc29bd522238bb46e68e45aaea2294434-1627753198-1800-AZ4YmPhFNjcGQGjSZOM3CCKYt/vlPRuwUO8Mo5aPzLuJ91CqXHOyDAW0qbo+3Wh5GvhNqf5wRXpmEomGyfnjMiSEn0oHZZgEwt69lMB1mmtydORqjes61NSkzRp435zla/dSRBRP21/U4QyDeq0ZrcY=',s:[0x05e4853420,0x26241a6002],}})();
  3. Standard extension development in basic HTML, CSS and JavaScript and modern development in React and TypeScript Design a build system for developing extensions using Webpack Build user interfaces using popular component libraries like Material UI Using HTTP requests in your chrome extensions to interact with third party APIs Work with simple command line tools such as Git and NPM Learn to use Manifest Version 3 Chrome APIs, newly released in 2021 Build a multi-featured weather extension built in React, TypeScript and Webpack Design an ad blocker extension that covers the basic principles of ad blocking Create a study focus timer extension built in simple JavaScript, HTML and CSS Build a mini TV show search extension and text-to-speech extension Bonus mini-section covering the basics of Chrome Extension themes Show more Show less Course content 9 sections • 83 lectures • 8h 52m total length Expand all sections Course Orientation 3 lectures • 9min Introduction Preview 03:09 Course Overview Preview 03:50 Why build Chrome Extensions? Preview 01:50 Chrome Extension Basics 13 lectures • 1hr 4min Section Overview 00:58 Section Notes 00:06 Editor Setup and Section Resources 03:07 Manifest File Preview 05:18 Popup and Browser Actions 09:08 Options Page 05:09 Chrome Storage API 09:04 Background Scripts and Service Workers 06:50 Chrome Alarms API 08:25 Chrome Notifications API 04:11 Optional: Notification Time Option Feature 04:15 Optional: Start, Stop and Reset Timer Feature 04:19 Optional: Chrome Dev Tools 03:05 Beginner Project: Study Timer Extension 9 lectures • 1hr 22min Section Overview 02:14 Manifest and Popup 06:34 Tasks List Feature Part 1 08:39 Tasks List Feature Part 2 07:29 Timer Feature Part 1 12:33 Timer Feature Part 2 12:06 Options Page 12:40 Styling Part 1 09:35 Styling Part 2 09:54 Data Fetching and More Chrome APIs 8 lectures • 51min Section Overview 00:52 Section Notes 00:14 Chrome Runtime and Context Menu APIs 07:53 Chrome Search and Tab APIs 06:22 Content Scripts 09:56 Message Passing 10:50 Data Fetching / HTTP Requests 11:11 Optional: Text to Speech API 03:13 TypeScript, React and Webpack Build System 12 lectures • 1hr 17min Section Overview 01:48 Section Notes 00:09 Git and NPM Setup 05:30 TypeScript and React Setup 07:27 Webpack Configuration Setup 08:10 Webpack Plugins Part 1 07:54 Webpack Plugins Part 2 04:25 Webpack CSS Loaders Part 1 05:56 Webpack CSS Loaders Part 2 06:05 Types Definition Libraries 09:43 Webpack Production Mode 08:01 Boilerplate Walkthrough 11:29 Advanced Project: Weather Extension 21 lectures • 2hr 53min Section Overview 03:10 Section Notes 00:12 Open Weather API Part 1 11:23 Open Weather API Part 2 08:18 Material UI Part 1 08:12 Material UI Part 2 07:02 Weather Card 07:14 Popup and Cities Feature Part 1 10:23 Popup and Cities Feature Part 2 10:32 Storage Part 1 07:08 Storage Part 2 05:48 Temperature Scale Feature Part 1 08:25 Temperature Scale Feature Part 2 08:23 Options Page Part 1 09:32 Options Page Part 2 10:57 Overlay Feature Part 1 10:00 Overlay Feature Part 2 09:50 Overlay Feature Part 3 07:21 Overlay Feature Part 4 05:27 Temperature Badge Feature 11:38 Weather Icons 11:42 Final Project: AdBlock Extension 6 lectures • 41min Section Overview 01:09 Section Notes 00:07 Web Request API Part 1 12:37 Web Request API Part 2 06:14 Declarative Net Request API 10:28 Content Script DOM Blocking 10:42 Chrome Web Store Publishing 6 lectures • 26min Section Overview 00:52 Section Notes 00:03 Developer Account Setup and Extension Guidelines 04:06 Developer Dashboard Walkthrough 13:47 Optional: Easy Clipboard Extension Analytics 06:16 Optional: Course Final Remarks 00:30 Bonus: Chrome Extension Themes 5 lectures • 11min Section Overview 00:48 Section Notes 00:02 Manifest File 02:07 Images and Properties 03:45 Colors and Tints 04:20 Requirements Basic understanding of JavaScript, HTML, CSS for standard extension development Basic knowledge of React for modern frameworks section Description 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! Who this course is for: 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 Show more Show less Instructor Jason Xian Software Developer 4.7 Instructor Rating 76 Reviews 472 Students 1 Course Hey everyone! I'm Jason, an avid software developer focused on building awesome full-stack web products. In the past I have worked professionally as a software developer at big tech companies such as Facebook. My goal is to share the fun and excitement of software development with you and to help you build real-world development skills through comprehensive, project focused courses. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'67789be9bc8553df',m:'1805073cc29bd522238bb46e68e45aaea2294434-1627753198-1800-AZ4YmPhFNjcGQGjSZOM3CCKYt/vlPRuwUO8Mo5aPzLuJ91CqXHOyDAW0qbo+3Wh5GvhNqf5wRXpmEomGyfnjMiSEn0oHZZgEwt69lMB1mmtydORqjes61NSkzRp435zla/dSRBRP21/U4QyDeq0ZrcY=',s:[0x05e4853420,0x26241a6002],}})();
  4. Design a build system for developing extensions using Webpack Build user interfaces using popular component libraries like Material UI Using HTTP requests in your chrome extensions to interact with third party APIs Work with simple command line tools such as Git and NPM Learn to use Manifest Version 3 Chrome APIs, newly released in 2021 Build a multi-featured weather extension built in React, TypeScript and Webpack Design an ad blocker extension that covers the basic principles of ad blocking Create a study focus timer extension built in simple JavaScript, HTML and CSS Build a mini TV show search extension and text-to-speech extension Bonus mini-section covering the basics of Chrome Extension themes Show more Show less Course content 9 sections • 83 lectures • 8h 52m total length Expand all sections Course Orientation 3 lectures • 9min Introduction Preview 03:09 Course Overview Preview 03:50 Why build Chrome Extensions? Preview 01:50 Chrome Extension Basics 13 lectures • 1hr 4min Section Overview 00:58 Section Notes 00:06 Editor Setup and Section Resources 03:07 Manifest File Preview 05:18 Popup and Browser Actions 09:08 Options Page 05:09 Chrome Storage API 09:04 Background Scripts and Service Workers 06:50 Chrome Alarms API 08:25 Chrome Notifications API 04:11 Optional: Notification Time Option Feature 04:15 Optional: Start, Stop and Reset Timer Feature 04:19 Optional: Chrome Dev Tools 03:05 Beginner Project: Study Timer Extension 9 lectures • 1hr 22min Section Overview 02:14 Manifest and Popup 06:34 Tasks List Feature Part 1 08:39 Tasks List Feature Part 2 07:29 Timer Feature Part 1 12:33 Timer Feature Part 2 12:06 Options Page 12:40 Styling Part 1 09:35 Styling Part 2 09:54 Data Fetching and More Chrome APIs 8 lectures • 51min Section Overview 00:52 Section Notes 00:14 Chrome Runtime and Context Menu APIs 07:53 Chrome Search and Tab APIs 06:22 Content Scripts 09:56 Message Passing 10:50 Data Fetching / HTTP Requests 11:11 Optional: Text to Speech API 03:13 TypeScript, React and Webpack Build System 12 lectures • 1hr 17min Section Overview 01:48 Section Notes 00:09 Git and NPM Setup 05:30 TypeScript and React Setup 07:27 Webpack Configuration Setup 08:10 Webpack Plugins Part 1 07:54 Webpack Plugins Part 2 04:25 Webpack CSS Loaders Part 1 05:56 Webpack CSS Loaders Part 2 06:05 Types Definition Libraries 09:43 Webpack Production Mode 08:01 Boilerplate Walkthrough 11:29 Advanced Project: Weather Extension 21 lectures • 2hr 53min Section Overview 03:10 Section Notes 00:12 Open Weather API Part 1 11:23 Open Weather API Part 2 08:18 Material UI Part 1 08:12 Material UI Part 2 07:02 Weather Card 07:14 Popup and Cities Feature Part 1 10:23 Popup and Cities Feature Part 2 10:32 Storage Part 1 07:08 Storage Part 2 05:48 Temperature Scale Feature Part 1 08:25 Temperature Scale Feature Part 2 08:23 Options Page Part 1 09:32 Options Page Part 2 10:57 Overlay Feature Part 1 10:00 Overlay Feature Part 2 09:50 Overlay Feature Part 3 07:21 Overlay Feature Part 4 05:27 Temperature Badge Feature 11:38 Weather Icons 11:42 Final Project: AdBlock Extension 6 lectures • 41min Section Overview 01:09 Section Notes 00:07 Web Request API Part 1 12:37 Web Request API Part 2 06:14 Declarative Net Request API 10:28 Content Script DOM Blocking 10:42 Chrome Web Store Publishing 6 lectures • 26min Section Overview 00:52 Section Notes 00:03 Developer Account Setup and Extension Guidelines 04:06 Developer Dashboard Walkthrough 13:47 Optional: Easy Clipboard Extension Analytics 06:16 Optional: Course Final Remarks 00:30 Bonus: Chrome Extension Themes 5 lectures • 11min Section Overview 00:48 Section Notes 00:02 Manifest File 02:07 Images and Properties 03:45 Colors and Tints 04:20 Requirements Basic understanding of JavaScript, HTML, CSS for standard extension development Basic knowledge of React for modern frameworks section Description 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! Who this course is for: 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 Show more Show less Instructor Jason Xian Software Developer 4.7 Instructor Rating 76 Reviews 472 Students 1 Course Hey everyone! I'm Jason, an avid software developer focused on building awesome full-stack web products. In the past I have worked professionally as a software developer at big tech companies such as Facebook. My goal is to share the fun and excitement of software development with you and to help you build real-world development skills through comprehensive, project focused courses. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'67789be9bc8553df',m:'1805073cc29bd522238bb46e68e45aaea2294434-1627753198-1800-AZ4YmPhFNjcGQGjSZOM3CCKYt/vlPRuwUO8Mo5aPzLuJ91CqXHOyDAW0qbo+3Wh5GvhNqf5wRXpmEomGyfnjMiSEn0oHZZgEwt69lMB1mmtydORqjes61NSkzRp435zla/dSRBRP21/U4QyDeq0ZrcY=',s:[0x05e4853420,0x26241a6002],}})();
  5. Build user interfaces using popular component libraries like Material UI Using HTTP requests in your chrome extensions to interact with third party APIs Work with simple command line tools such as Git and NPM Learn to use Manifest Version 3 Chrome APIs, newly released in 2021 Build a multi-featured weather extension built in React, TypeScript and Webpack Design an ad blocker extension that covers the basic principles of ad blocking Create a study focus timer extension built in simple JavaScript, HTML and CSS Build a mini TV show search extension and text-to-speech extension Bonus mini-section covering the basics of Chrome Extension themes Show more Show less Course content 9 sections • 83 lectures • 8h 52m total length Expand all sections Course Orientation 3 lectures • 9min Introduction Preview 03:09 Course Overview Preview 03:50 Why build Chrome Extensions? Preview 01:50 Chrome Extension Basics 13 lectures • 1hr 4min Section Overview 00:58 Section Notes 00:06 Editor Setup and Section Resources 03:07 Manifest File Preview 05:18 Popup and Browser Actions 09:08 Options Page 05:09 Chrome Storage API 09:04 Background Scripts and Service Workers 06:50 Chrome Alarms API 08:25 Chrome Notifications API 04:11 Optional: Notification Time Option Feature 04:15 Optional: Start, Stop and Reset Timer Feature 04:19 Optional: Chrome Dev Tools 03:05 Beginner Project: Study Timer Extension 9 lectures • 1hr 22min Section Overview 02:14 Manifest and Popup 06:34 Tasks List Feature Part 1 08:39 Tasks List Feature Part 2 07:29 Timer Feature Part 1 12:33 Timer Feature Part 2 12:06 Options Page 12:40 Styling Part 1 09:35 Styling Part 2 09:54 Data Fetching and More Chrome APIs 8 lectures • 51min Section Overview 00:52 Section Notes 00:14 Chrome Runtime and Context Menu APIs 07:53 Chrome Search and Tab APIs 06:22 Content Scripts 09:56 Message Passing 10:50 Data Fetching / HTTP Requests 11:11 Optional: Text to Speech API 03:13 TypeScript, React and Webpack Build System 12 lectures • 1hr 17min Section Overview 01:48 Section Notes 00:09 Git and NPM Setup 05:30 TypeScript and React Setup 07:27 Webpack Configuration Setup 08:10 Webpack Plugins Part 1 07:54 Webpack Plugins Part 2 04:25 Webpack CSS Loaders Part 1 05:56 Webpack CSS Loaders Part 2 06:05 Types Definition Libraries 09:43 Webpack Production Mode 08:01 Boilerplate Walkthrough 11:29 Advanced Project: Weather Extension 21 lectures • 2hr 53min Section Overview 03:10 Section Notes 00:12 Open Weather API Part 1 11:23 Open Weather API Part 2 08:18 Material UI Part 1 08:12 Material UI Part 2 07:02 Weather Card 07:14 Popup and Cities Feature Part 1 10:23 Popup and Cities Feature Part 2 10:32 Storage Part 1 07:08 Storage Part 2 05:48 Temperature Scale Feature Part 1 08:25 Temperature Scale Feature Part 2 08:23 Options Page Part 1 09:32 Options Page Part 2 10:57 Overlay Feature Part 1 10:00 Overlay Feature Part 2 09:50 Overlay Feature Part 3 07:21 Overlay Feature Part 4 05:27 Temperature Badge Feature 11:38 Weather Icons 11:42 Final Project: AdBlock Extension 6 lectures • 41min Section Overview 01:09 Section Notes 00:07 Web Request API Part 1 12:37 Web Request API Part 2 06:14 Declarative Net Request API 10:28 Content Script DOM Blocking 10:42 Chrome Web Store Publishing 6 lectures • 26min Section Overview 00:52 Section Notes 00:03 Developer Account Setup and Extension Guidelines 04:06 Developer Dashboard Walkthrough 13:47 Optional: Easy Clipboard Extension Analytics 06:16 Optional: Course Final Remarks 00:30 Bonus: Chrome Extension Themes 5 lectures • 11min Section Overview 00:48 Section Notes 00:02 Manifest File 02:07 Images and Properties 03:45 Colors and Tints 04:20 Requirements Basic understanding of JavaScript, HTML, CSS for standard extension development Basic knowledge of React for modern frameworks section Description 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! Who this course is for: 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 Show more Show less Instructor Jason Xian Software Developer 4.7 Instructor Rating 76 Reviews 472 Students 1 Course Hey everyone! I'm Jason, an avid software developer focused on building awesome full-stack web products. In the past I have worked professionally as a software developer at big tech companies such as Facebook. My goal is to share the fun and excitement of software development with you and to help you build real-world development skills through comprehensive, project focused courses. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'67789be9bc8553df',m:'1805073cc29bd522238bb46e68e45aaea2294434-1627753198-1800-AZ4YmPhFNjcGQGjSZOM3CCKYt/vlPRuwUO8Mo5aPzLuJ91CqXHOyDAW0qbo+3Wh5GvhNqf5wRXpmEomGyfnjMiSEn0oHZZgEwt69lMB1mmtydORqjes61NSkzRp435zla/dSRBRP21/U4QyDeq0ZrcY=',s:[0x05e4853420,0x26241a6002],}})();
  6. Using HTTP requests in your chrome extensions to interact with third party APIs Work with simple command line tools such as Git and NPM Learn to use Manifest Version 3 Chrome APIs, newly released in 2021 Build a multi-featured weather extension built in React, TypeScript and Webpack Design an ad blocker extension that covers the basic principles of ad blocking Create a study focus timer extension built in simple JavaScript, HTML and CSS Build a mini TV show search extension and text-to-speech extension Bonus mini-section covering the basics of Chrome Extension themes Show more Show less Course content 9 sections • 83 lectures • 8h 52m total length Expand all sections Course Orientation 3 lectures • 9min Introduction Preview 03:09 Course Overview Preview 03:50 Why build Chrome Extensions? Preview 01:50 Chrome Extension Basics 13 lectures • 1hr 4min Section Overview 00:58 Section Notes 00:06 Editor Setup and Section Resources 03:07 Manifest File Preview 05:18 Popup and Browser Actions 09:08 Options Page 05:09 Chrome Storage API 09:04 Background Scripts and Service Workers 06:50 Chrome Alarms API 08:25 Chrome Notifications API 04:11 Optional: Notification Time Option Feature 04:15 Optional: Start, Stop and Reset Timer Feature 04:19 Optional: Chrome Dev Tools 03:05 Beginner Project: Study Timer Extension 9 lectures • 1hr 22min Section Overview 02:14 Manifest and Popup 06:34 Tasks List Feature Part 1 08:39 Tasks List Feature Part 2 07:29 Timer Feature Part 1 12:33 Timer Feature Part 2 12:06 Options Page 12:40 Styling Part 1 09:35 Styling Part 2 09:54 Data Fetching and More Chrome APIs 8 lectures • 51min Section Overview 00:52 Section Notes 00:14 Chrome Runtime and Context Menu APIs 07:53 Chrome Search and Tab APIs 06:22 Content Scripts 09:56 Message Passing 10:50 Data Fetching / HTTP Requests 11:11 Optional: Text to Speech API 03:13 TypeScript, React and Webpack Build System 12 lectures • 1hr 17min Section Overview 01:48 Section Notes 00:09 Git and NPM Setup 05:30 TypeScript and React Setup 07:27 Webpack Configuration Setup 08:10 Webpack Plugins Part 1 07:54 Webpack Plugins Part 2 04:25 Webpack CSS Loaders Part 1 05:56 Webpack CSS Loaders Part 2 06:05 Types Definition Libraries 09:43 Webpack Production Mode 08:01 Boilerplate Walkthrough 11:29 Advanced Project: Weather Extension 21 lectures • 2hr 53min Section Overview 03:10 Section Notes 00:12 Open Weather API Part 1 11:23 Open Weather API Part 2 08:18 Material UI Part 1 08:12 Material UI Part 2 07:02 Weather Card 07:14 Popup and Cities Feature Part 1 10:23 Popup and Cities Feature Part 2 10:32 Storage Part 1 07:08 Storage Part 2 05:48 Temperature Scale Feature Part 1 08:25 Temperature Scale Feature Part 2 08:23 Options Page Part 1 09:32 Options Page Part 2 10:57 Overlay Feature Part 1 10:00 Overlay Feature Part 2 09:50 Overlay Feature Part 3 07:21 Overlay Feature Part 4 05:27 Temperature Badge Feature 11:38 Weather Icons 11:42 Final Project: AdBlock Extension 6 lectures • 41min Section Overview 01:09 Section Notes 00:07 Web Request API Part 1 12:37 Web Request API Part 2 06:14 Declarative Net Request API 10:28 Content Script DOM Blocking 10:42 Chrome Web Store Publishing 6 lectures • 26min Section Overview 00:52 Section Notes 00:03 Developer Account Setup and Extension Guidelines 04:06 Developer Dashboard Walkthrough 13:47 Optional: Easy Clipboard Extension Analytics 06:16 Optional: Course Final Remarks 00:30 Bonus: Chrome Extension Themes 5 lectures • 11min Section Overview 00:48 Section Notes 00:02 Manifest File 02:07 Images and Properties 03:45 Colors and Tints 04:20 Requirements Basic understanding of JavaScript, HTML, CSS for standard extension development Basic knowledge of React for modern frameworks section Description 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! Who this course is for: 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 Show more Show less Instructor Jason Xian Software Developer 4.7 Instructor Rating 76 Reviews 472 Students 1 Course Hey everyone! I'm Jason, an avid software developer focused on building awesome full-stack web products. In the past I have worked professionally as a software developer at big tech companies such as Facebook. My goal is to share the fun and excitement of software development with you and to help you build real-world development skills through comprehensive, project focused courses. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'67789be9bc8553df',m:'1805073cc29bd522238bb46e68e45aaea2294434-1627753198-1800-AZ4YmPhFNjcGQGjSZOM3CCKYt/vlPRuwUO8Mo5aPzLuJ91CqXHOyDAW0qbo+3Wh5GvhNqf5wRXpmEomGyfnjMiSEn0oHZZgEwt69lMB1mmtydORqjes61NSkzRp435zla/dSRBRP21/U4QyDeq0ZrcY=',s:[0x05e4853420,0x26241a6002],}})();
  7. Work with simple command line tools such as Git and NPM Learn to use Manifest Version 3 Chrome APIs, newly released in 2021 Build a multi-featured weather extension built in React, TypeScript and Webpack Design an ad blocker extension that covers the basic principles of ad blocking Create a study focus timer extension built in simple JavaScript, HTML and CSS Build a mini TV show search extension and text-to-speech extension Bonus mini-section covering the basics of Chrome Extension themes Show more Show less Course content 9 sections • 83 lectures • 8h 52m total length Expand all sections Course Orientation 3 lectures • 9min Introduction Preview 03:09 Course Overview Preview 03:50 Why build Chrome Extensions? Preview 01:50 Chrome Extension Basics 13 lectures • 1hr 4min Section Overview 00:58 Section Notes 00:06 Editor Setup and Section Resources 03:07 Manifest File Preview 05:18 Popup and Browser Actions 09:08 Options Page 05:09 Chrome Storage API 09:04 Background Scripts and Service Workers 06:50 Chrome Alarms API 08:25 Chrome Notifications API 04:11 Optional: Notification Time Option Feature 04:15 Optional: Start, Stop and Reset Timer Feature 04:19 Optional: Chrome Dev Tools 03:05 Beginner Project: Study Timer Extension 9 lectures • 1hr 22min Section Overview 02:14 Manifest and Popup 06:34 Tasks List Feature Part 1 08:39 Tasks List Feature Part 2 07:29 Timer Feature Part 1 12:33 Timer Feature Part 2 12:06 Options Page 12:40 Styling Part 1 09:35 Styling Part 2 09:54 Data Fetching and More Chrome APIs 8 lectures • 51min Section Overview 00:52 Section Notes 00:14 Chrome Runtime and Context Menu APIs 07:53 Chrome Search and Tab APIs 06:22 Content Scripts 09:56 Message Passing 10:50 Data Fetching / HTTP Requests 11:11 Optional: Text to Speech API 03:13 TypeScript, React and Webpack Build System 12 lectures • 1hr 17min Section Overview 01:48 Section Notes 00:09 Git and NPM Setup 05:30 TypeScript and React Setup 07:27 Webpack Configuration Setup 08:10 Webpack Plugins Part 1 07:54 Webpack Plugins Part 2 04:25 Webpack CSS Loaders Part 1 05:56 Webpack CSS Loaders Part 2 06:05 Types Definition Libraries 09:43 Webpack Production Mode 08:01 Boilerplate Walkthrough 11:29 Advanced Project: Weather Extension 21 lectures • 2hr 53min Section Overview 03:10 Section Notes 00:12 Open Weather API Part 1 11:23 Open Weather API Part 2 08:18 Material UI Part 1 08:12 Material UI Part 2 07:02 Weather Card 07:14 Popup and Cities Feature Part 1 10:23 Popup and Cities Feature Part 2 10:32 Storage Part 1 07:08 Storage Part 2 05:48 Temperature Scale Feature Part 1 08:25 Temperature Scale Feature Part 2 08:23 Options Page Part 1 09:32 Options Page Part 2 10:57 Overlay Feature Part 1 10:00 Overlay Feature Part 2 09:50 Overlay Feature Part 3 07:21 Overlay Feature Part 4 05:27 Temperature Badge Feature 11:38 Weather Icons 11:42 Final Project: AdBlock Extension 6 lectures • 41min Section Overview 01:09 Section Notes 00:07 Web Request API Part 1 12:37 Web Request API Part 2 06:14 Declarative Net Request API 10:28 Content Script DOM Blocking 10:42 Chrome Web Store Publishing 6 lectures • 26min Section Overview 00:52 Section Notes 00:03 Developer Account Setup and Extension Guidelines 04:06 Developer Dashboard Walkthrough 13:47 Optional: Easy Clipboard Extension Analytics 06:16 Optional: Course Final Remarks 00:30 Bonus: Chrome Extension Themes 5 lectures • 11min Section Overview 00:48 Section Notes 00:02 Manifest File 02:07 Images and Properties 03:45 Colors and Tints 04:20 Requirements Basic understanding of JavaScript, HTML, CSS for standard extension development Basic knowledge of React for modern frameworks section Description 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! Who this course is for: 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 Show more Show less Instructor Jason Xian Software Developer 4.7 Instructor Rating 76 Reviews 472 Students 1 Course Hey everyone! I'm Jason, an avid software developer focused on building awesome full-stack web products. In the past I have worked professionally as a software developer at big tech companies such as Facebook. My goal is to share the fun and excitement of software development with you and to help you build real-world development skills through comprehensive, project focused courses. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'67789be9bc8553df',m:'1805073cc29bd522238bb46e68e45aaea2294434-1627753198-1800-AZ4YmPhFNjcGQGjSZOM3CCKYt/vlPRuwUO8Mo5aPzLuJ91CqXHOyDAW0qbo+3Wh5GvhNqf5wRXpmEomGyfnjMiSEn0oHZZgEwt69lMB1mmtydORqjes61NSkzRp435zla/dSRBRP21/U4QyDeq0ZrcY=',s:[0x05e4853420,0x26241a6002],}})();
  8. Learn to use Manifest Version 3 Chrome APIs, newly released in 2021 Build a multi-featured weather extension built in React, TypeScript and Webpack Design an ad blocker extension that covers the basic principles of ad blocking Create a study focus timer extension built in simple JavaScript, HTML and CSS Build a mini TV show search extension and text-to-speech extension Bonus mini-section covering the basics of Chrome Extension themes Show more Show less Course content 9 sections • 83 lectures • 8h 52m total length Expand all sections Course Orientation 3 lectures • 9min Introduction Preview 03:09 Course Overview Preview 03:50 Why build Chrome Extensions? Preview 01:50 Chrome Extension Basics 13 lectures • 1hr 4min Section Overview 00:58 Section Notes 00:06 Editor Setup and Section Resources 03:07 Manifest File Preview 05:18 Popup and Browser Actions 09:08 Options Page 05:09 Chrome Storage API 09:04 Background Scripts and Service Workers 06:50 Chrome Alarms API 08:25 Chrome Notifications API 04:11 Optional: Notification Time Option Feature 04:15 Optional: Start, Stop and Reset Timer Feature 04:19 Optional: Chrome Dev Tools 03:05 Beginner Project: Study Timer Extension 9 lectures • 1hr 22min Section Overview 02:14 Manifest and Popup 06:34 Tasks List Feature Part 1 08:39 Tasks List Feature Part 2 07:29 Timer Feature Part 1 12:33 Timer Feature Part 2 12:06 Options Page 12:40 Styling Part 1 09:35 Styling Part 2 09:54 Data Fetching and More Chrome APIs 8 lectures • 51min Section Overview 00:52 Section Notes 00:14 Chrome Runtime and Context Menu APIs 07:53 Chrome Search and Tab APIs 06:22 Content Scripts 09:56 Message Passing 10:50 Data Fetching / HTTP Requests 11:11 Optional: Text to Speech API 03:13 TypeScript, React and Webpack Build System 12 lectures • 1hr 17min Section Overview 01:48 Section Notes 00:09 Git and NPM Setup 05:30 TypeScript and React Setup 07:27 Webpack Configuration Setup 08:10 Webpack Plugins Part 1 07:54 Webpack Plugins Part 2 04:25 Webpack CSS Loaders Part 1 05:56 Webpack CSS Loaders Part 2 06:05 Types Definition Libraries 09:43 Webpack Production Mode 08:01 Boilerplate Walkthrough 11:29 Advanced Project: Weather Extension 21 lectures • 2hr 53min Section Overview 03:10 Section Notes 00:12 Open Weather API Part 1 11:23 Open Weather API Part 2 08:18 Material UI Part 1 08:12 Material UI Part 2 07:02 Weather Card 07:14 Popup and Cities Feature Part 1 10:23 Popup and Cities Feature Part 2 10:32 Storage Part 1 07:08 Storage Part 2 05:48 Temperature Scale Feature Part 1 08:25 Temperature Scale Feature Part 2 08:23 Options Page Part 1 09:32 Options Page Part 2 10:57 Overlay Feature Part 1 10:00 Overlay Feature Part 2 09:50 Overlay Feature Part 3 07:21 Overlay Feature Part 4 05:27 Temperature Badge Feature 11:38 Weather Icons 11:42 Final Project: AdBlock Extension 6 lectures • 41min Section Overview 01:09 Section Notes 00:07 Web Request API Part 1 12:37 Web Request API Part 2 06:14 Declarative Net Request API 10:28 Content Script DOM Blocking 10:42 Chrome Web Store Publishing 6 lectures • 26min Section Overview 00:52 Section Notes 00:03 Developer Account Setup and Extension Guidelines 04:06 Developer Dashboard Walkthrough 13:47 Optional: Easy Clipboard Extension Analytics 06:16 Optional: Course Final Remarks 00:30 Bonus: Chrome Extension Themes 5 lectures • 11min Section Overview 00:48 Section Notes 00:02 Manifest File 02:07 Images and Properties 03:45 Colors and Tints 04:20 Requirements Basic understanding of JavaScript, HTML, CSS for standard extension development Basic knowledge of React for modern frameworks section Description 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! Who this course is for: 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 Show more Show less Instructor Jason Xian Software Developer 4.7 Instructor Rating 76 Reviews 472 Students 1 Course Hey everyone! I'm Jason, an avid software developer focused on building awesome full-stack web products. In the past I have worked professionally as a software developer at big tech companies such as Facebook. My goal is to share the fun and excitement of software development with you and to help you build real-world development skills through comprehensive, project focused courses. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'67789be9bc8553df',m:'1805073cc29bd522238bb46e68e45aaea2294434-1627753198-1800-AZ4YmPhFNjcGQGjSZOM3CCKYt/vlPRuwUO8Mo5aPzLuJ91CqXHOyDAW0qbo+3Wh5GvhNqf5wRXpmEomGyfnjMiSEn0oHZZgEwt69lMB1mmtydORqjes61NSkzRp435zla/dSRBRP21/U4QyDeq0ZrcY=',s:[0x05e4853420,0x26241a6002],}})();
  9. Build a multi-featured weather extension built in React, TypeScript and Webpack Design an ad blocker extension that covers the basic principles of ad blocking Create a study focus timer extension built in simple JavaScript, HTML and CSS Build a mini TV show search extension and text-to-speech extension Bonus mini-section covering the basics of Chrome Extension themes Show more Show less Course content 9 sections • 83 lectures • 8h 52m total length Expand all sections Course Orientation 3 lectures • 9min Introduction Preview 03:09 Course Overview Preview 03:50 Why build Chrome Extensions? Preview 01:50 Chrome Extension Basics 13 lectures • 1hr 4min Section Overview 00:58 Section Notes 00:06 Editor Setup and Section Resources 03:07 Manifest File Preview 05:18 Popup and Browser Actions 09:08 Options Page 05:09 Chrome Storage API 09:04 Background Scripts and Service Workers 06:50 Chrome Alarms API 08:25 Chrome Notifications API 04:11 Optional: Notification Time Option Feature 04:15 Optional: Start, Stop and Reset Timer Feature 04:19 Optional: Chrome Dev Tools 03:05 Beginner Project: Study Timer Extension 9 lectures • 1hr 22min Section Overview 02:14 Manifest and Popup 06:34 Tasks List Feature Part 1 08:39 Tasks List Feature Part 2 07:29 Timer Feature Part 1 12:33 Timer Feature Part 2 12:06 Options Page 12:40 Styling Part 1 09:35 Styling Part 2 09:54 Data Fetching and More Chrome APIs 8 lectures • 51min Section Overview 00:52 Section Notes 00:14 Chrome Runtime and Context Menu APIs 07:53 Chrome Search and Tab APIs 06:22 Content Scripts 09:56 Message Passing 10:50 Data Fetching / HTTP Requests 11:11 Optional: Text to Speech API 03:13 TypeScript, React and Webpack Build System 12 lectures • 1hr 17min Section Overview 01:48 Section Notes 00:09 Git and NPM Setup 05:30 TypeScript and React Setup 07:27 Webpack Configuration Setup 08:10 Webpack Plugins Part 1 07:54 Webpack Plugins Part 2 04:25 Webpack CSS Loaders Part 1 05:56 Webpack CSS Loaders Part 2 06:05 Types Definition Libraries 09:43 Webpack Production Mode 08:01 Boilerplate Walkthrough 11:29 Advanced Project: Weather Extension 21 lectures • 2hr 53min Section Overview 03:10 Section Notes 00:12 Open Weather API Part 1 11:23 Open Weather API Part 2 08:18 Material UI Part 1 08:12 Material UI Part 2 07:02 Weather Card 07:14 Popup and Cities Feature Part 1 10:23 Popup and Cities Feature Part 2 10:32 Storage Part 1 07:08 Storage Part 2 05:48 Temperature Scale Feature Part 1 08:25 Temperature Scale Feature Part 2 08:23 Options Page Part 1 09:32 Options Page Part 2 10:57 Overlay Feature Part 1 10:00 Overlay Feature Part 2 09:50 Overlay Feature Part 3 07:21 Overlay Feature Part 4 05:27 Temperature Badge Feature 11:38 Weather Icons 11:42 Final Project: AdBlock Extension 6 lectures • 41min Section Overview 01:09 Section Notes 00:07 Web Request API Part 1 12:37 Web Request API Part 2 06:14 Declarative Net Request API 10:28 Content Script DOM Blocking 10:42 Chrome Web Store Publishing 6 lectures • 26min Section Overview 00:52 Section Notes 00:03 Developer Account Setup and Extension Guidelines 04:06 Developer Dashboard Walkthrough 13:47 Opti