آموزش توسعه برنامه افزودنی کروم React و TypeScript [2023]

سرفصل ها و درس ها

گرایش دوره Course Orientation

• چرا برنامه های افزودنی کروم بسازیم؟ Why build Chrome Extensions?

گرایش دوره Course Orientation

• معرفی Introduction

• معرفی Introduction

• بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

• چرا برنامه های افزودنی کروم بسازیم؟ Why build Chrome Extensions?

اصول برنامه افزودنی کروم Chrome Extension Basics

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• راه اندازی ویرایشگر و منابع بخش Editor Setup and Section Resources

• فایل مانیفست Manifest File

• صفحه گزینه ها Options Page

• اسکریپت های پس زمینه و کارگران خدمات Background Scripts and Service Workers

• Chrome Notifications API Chrome Notifications API

• اختیاری: ویژگی گزینه زمان اطلاع رسانی Optional: Notification Time Option Feature

• اختیاری: شروع، توقف و تنظیم مجدد ویژگی تایمر Optional: Start, Stop and Reset Timer Feature

اصول برنامه افزودنی کروم Chrome Extension Basics

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• راه اندازی ویرایشگر و منابع بخش Editor Setup and Section Resources

• فایل مانیفست Manifest File

• پاپ آپ و اقدامات مرورگر Popup and Browser Actions

• پاپ آپ و اقدامات مرورگر Popup and Browser Actions

• صفحه گزینه ها Options Page

• صفحه گزینه ها Options Page

• Chrome Storage API Chrome Storage API

• Chrome Storage API Chrome Storage API

• اسکریپت های پس زمینه و کارگران خدمات Background Scripts and Service Workers

• Chrome Alarms API Chrome Alarms API

• Chrome Alarms API Chrome Alarms API

• Chrome Notifications API Chrome Notifications API

• اختیاری: ویژگی گزینه زمان اطلاع رسانی Optional: Notification Time Option Feature

• اختیاری: شروع، توقف و تنظیم مجدد ویژگی تایمر Optional: Start, Stop and Reset Timer Feature

• اختیاری: Chrome Dev Tools Optional: Chrome Dev Tools

• اختیاری: Chrome Dev Tools Optional: Chrome Dev Tools

پروژه مبتدی: توسعه تایمر مطالعه Beginner Project: Study Timer Extension

• نمای کلی بخش Section Overview

• Manifest و Popup Manifest and Popup

• ویژگی لیست وظایف قسمت 1 Tasks List Feature Part 1

• ویژگی تایمر قسمت 2 Timer Feature Part 2

• صفحه گزینه ها Options Page

• استایل بخش 1 Styling Part 1

• استایل بخش 2 Styling Part 2

پروژه مبتدی: توسعه تایمر مطالعه Beginner Project: Study Timer Extension

• نمای کلی بخش Section Overview

• Manifest و Popup Manifest and Popup

• ویژگی لیست وظایف قسمت 1 Tasks List Feature Part 1

• ویژگی لیست وظایف قسمت 2 Tasks List Feature Part 2

• ویژگی لیست وظایف قسمت 2 Tasks List Feature Part 2

• ویژگی تایمر قسمت 1 Timer Feature Part 1

• ویژگی تایمر قسمت 1 Timer Feature Part 1

• ویژگی تایمر قسمت 2 Timer Feature Part 2

• صفحه گزینه ها Options Page

• صفحه گزینه ها Options Page

• استایل بخش 1 Styling Part 1

• استایل بخش 2 Styling Part 2

واکشی داده و بیشتر Chrome API Data Fetching and More Chrome APIs

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• اسکریپت های محتوا Content Scripts

واکشی داده و بیشتر Chrome API Data Fetching and More Chrome APIs

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• Chrome Runtime و منوی زمینه API Chrome Runtime and Context Menu APIs

• Chrome Runtime و منوی زمینه API Chrome Runtime and Context Menu APIs

• جستجوی کروم و APIهای برگه Chrome Search and Tab APIs

• جستجوی کروم و APIهای برگه Chrome Search and Tab APIs

• اسکریپت های محتوا Content Scripts

• ارسال پیام Message Passing

• ارسال پیام Message Passing

• واکشی داده ها/درخواست های HTTP Data Fetching / HTTP Requests

• واکشی داده ها/درخواست های HTTP Data Fetching / HTTP Requests

• اختیاری: Text to Speech API Optional: Text to Speech API

• اختیاری: Text to Speech API Optional: Text to Speech API

TypeScript، React و Webpack Build System TypeScript, React and Webpack Build System

• یادداشت های بخش Section Notes

• TypeScript و React Setup TypeScript and React Setup

• پلاگین های وب پک قسمت 2 Webpack Plugins Part 2

• Webpack CSS Loaders قسمت 2 Webpack CSS Loaders Part 2

• حالت تولید Webpack Webpack Production Mode

TypeScript، React و Webpack Build System TypeScript, React and Webpack Build System

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• راه اندازی Git و NPM Git and NPM Setup

• راه اندازی Git و NPM Git and NPM Setup

• TypeScript و React Setup TypeScript and React Setup

• راه اندازی پیکربندی Webpack Webpack Configuration Setup

• راه اندازی پیکربندی Webpack Webpack Configuration Setup

• پلاگین های وب پک قسمت 1 Webpack Plugins Part 1

• پلاگین های وب پک قسمت 1 Webpack Plugins Part 1

• پلاگین های وب پک قسمت 2 Webpack Plugins Part 2

• Webpack CSS Loaders قسمت 1 Webpack CSS Loaders Part 1

• Webpack CSS Loaders قسمت 1 Webpack CSS Loaders Part 1

• Webpack CSS Loaders قسمت 2 Webpack CSS Loaders Part 2

• انواع تعریف کتابخانه ها Types Definition Libraries

• انواع تعریف کتابخانه ها Types Definition Libraries

• حالت تولید Webpack Webpack Production Mode

• Boilerplate Walkthrough Boilerplate Walkthrough

• Boilerplate Walkthrough Boilerplate Walkthrough

پروژه پیشرفته: توسعه آب و هوا Advanced Project: Weather Extension

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• قسمت 2 Weather API را باز کنید Open Weather API Part 2

• رابط کاربری Material Part 1 Material UI Part 1

• کارت هواشناسی Weather Card

• پاپ آپ و ویژگی شهرها قسمت 1 Popup and Cities Feature Part 1

• پاپ آپ و ویژگی شهرها قسمت 2 Popup and Cities Feature Part 2

• ذخیره سازی قسمت 1 Storage Part 1

• ذخیره سازی قسمت 2 Storage Part 2

• ویژگی مقیاس دما قسمت 2 Temperature Scale Feature Part 2

• ویژگی Overlay قسمت 2 Overlay Feature Part 2

• ویژگی Overlay قسمت 3 Overlay Feature Part 3

• ویژگی Overlay قسمت 4 Overlay Feature Part 4

• ویژگی نشان دما Temperature Badge Feature

پروژه پیشرفته: توسعه آب و هوا Advanced Project: Weather Extension

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• باز کردن Weather API قسمت 1 Open Weather API Part 1

• باز کردن Weather API قسمت 1 Open Weather API Part 1

• قسمت 2 Weather API را باز کنید Open Weather API Part 2

• رابط کاربری Material Part 1 Material UI Part 1

• Material UI قسمت 2 Material UI Part 2

• Material UI قسمت 2 Material UI Part 2

• کارت هواشناسی Weather Card

• پاپ آپ و ویژگی شهرها قسمت 1 Popup and Cities Feature Part 1

• پاپ آپ و ویژگی شهرها قسمت 2 Popup and Cities Feature Part 2

• ذخیره سازی قسمت 1 Storage Part 1

• ذخیره سازی قسمت 2 Storage Part 2

• ویژگی مقیاس دما قسمت 1 Temperature Scale Feature Part 1

• ویژگی مقیاس دما قسمت 1 Temperature Scale Feature Part 1

• ویژگی مقیاس دما قسمت 2 Temperature Scale Feature Part 2

• صفحه گزینه ها قسمت 1 Options Page Part 1

• صفحه گزینه ها قسمت 1 Options Page Part 1

• صفحه گزینه ها قسمت 2 Options Page Part 2

• صفحه گزینه ها قسمت 2 Options Page Part 2

• ویژگی پوشش قسمت 1 Overlay Feature Part 1

• ویژگی پوشش قسمت 1 Overlay Feature Part 1

• ویژگی Overlay قسمت 2 Overlay Feature Part 2

• ویژگی Overlay قسمت 3 Overlay Feature Part 3

• ویژگی Overlay قسمت 4 Overlay Feature Part 4

• ویژگی نشان دما Temperature Badge Feature

• نمادهای آب و هوا Weather Icons

• نمادهای آب و هوا Weather Icons

پروژه نهایی: افزونه AdBlock Final Project: AdBlock Extension

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• Web Request API قسمت 1 Web Request API Part 1

• API Net Request Declarative Declarative Net Request API

پروژه نهایی: افزونه AdBlock Final Project: AdBlock Extension

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• Web Request API قسمت 1 Web Request API Part 1

• Web Request API قسمت 2 Web Request API Part 2

• Web Request API قسمت 2 Web Request API Part 2

• API Net Request Declarative Declarative Net Request API

• مسدود کردن DOM اسکریپت محتوا Content Script DOM Blocking

• مسدود کردن DOM اسکریپت محتوا Content Script DOM Blocking

انتشار فروشگاه وب کروم Chrome Web Store Publishing

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• دستورالعمل‌های راه‌اندازی و افزونه حساب توسعه‌دهنده Developer Account Setup and Extension Guidelines

• مروری بر داشبورد توسعه‌دهنده Developer Dashboard Walkthrough

انتشار فروشگاه وب کروم Chrome Web Store Publishing

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• دستورالعمل‌های راه‌اندازی و افزونه حساب توسعه‌دهنده Developer Account Setup and Extension Guidelines

• مروری بر داشبورد توسعه‌دهنده Developer Dashboard Walkthrough

• اختیاری: Easy Clipboard Extension Analytics Optional: Easy Clipboard Extension Analytics

• اختیاری: Easy Clipboard Extension Analytics Optional: Easy Clipboard Extension Analytics

• اختیاری: نکات پایانی دوره Optional: Course Final Remarks

• اختیاری: نکات پایانی دوره Optional: Course Final Remarks

امتیاز: تم های برنامه افزودنی کروم Bonus: Chrome Extension Themes

• نمای کلی بخش Section Overview

• فایل مانیفست Manifest File

• تصاویر و خواص Images and Properties

امتیاز: تم های برنامه افزودنی کروم Bonus: Chrome Extension Themes

• نمای کلی بخش Section Overview

• نمای کلی بخش Section Overview

• یادداشت های بخش Section Notes

• یادداشت های بخش Section Notes

• فایل مانیفست Manifest File

• تصاویر و خواص Images and Properties

• رنگ ها و ته رنگ ها Colors and Tints

• رنگ ها و ته رنگ ها Colors and Tints