Освойте создание полноценных Chrome-расширений с нуля до продакшена! Научитесь разрабатывать мощные, функциональные Chrome-расширения с современным стеком технологий и лучшими практиками. В этом курсе вы создадите продвинутое расширение, которое интегрируется с отдельным React-интерфейсом и взаимодействует с API на Node.js. Это курс, который я сам хотел бы пройти, когда только начинал работать с Chrome-расширениями!
Что вас ждет в курсе?
Курс построен на основе практического проекта, где мы шаг за шагом создадим полноценное Chrome-расширение с современной архитектурой. Вы научитесь:
Разрабатывать пользовательский интерфейс с React и API с Node.js / Express
Создавать Chrome-расширение, которое взаимодействует с UI и API
Настраивать аутентификацию пользователей на уровне расширения, интерфейса и API
Использовать продвинутые техники разработки (например, инъекцию React-приложений в веб-страницы через Content Scripts)
Работать с Chrome Extension API (Actions API, Tabs API и другие) для создания удобного пользовательского опыта
Размещать и публиковать расширения, UI и API
...и многое другое!
Технологии и инструменты
На протяжении курса мы будем использовать современные инструменты и библиотеки:
Инструменты: Docker, MongoDB Compass, Mailtrap, Postman и другие
Мы разработаем функциональное Chrome-расширение, вдохновленное Pocket: пользователи смогут сохранять, обновлять, удалять и тегировать ссылки, создавая удобную систему для их организации и быстрого поиска.
Посмотреть больше
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
Ограничение времени просмотра
Вы можете просматривать пробный урок только 10 минут. Получите полный доступ, чтобы смотреть без ограничений.
2.1. Creating the React app structure and installing dependencies
Урок 5.
00:13:43
2.2. Setting up theming, routes, and context
Урок 6.
00:15:29
3.1. Creating the Dockerfile and installing dependencies
Урок 7.
00:19:59
3.2. Setting up base app structure
Урок 8.
00:25:35
4.1. Creating the registration API endpoint
Урок 9.
00:10:44
4.2. Sending emails with nodemailer
Урок 10.
00:09:24
4.3. Communicating between the UI and API
Урок 11.
00:19:12
4.4. Building reusable base components
Урок 12.
00:29:39
4.5. Creating the registration UI
Урок 13.
00:08:18
4.6. Creating the email verification API endpoint
Урок 14.
00:14:44
4.7. Creating the email verification UI
Урок 15.
00:07:46
4.8. Creating the login API endpoint
Урок 16.
00:13:27
4.9. Creating the login UI
Урок 17.
00:14:34
4.10. Validating and securing API requests
Урок 18.
00:13:55
4.11. Persisting users on the UI
Урок 19.
00:16:08
4.12. Creating protected routes, handling unverified accounts, and allowing logout
Урок 20.
00:22:03
5.1. Creating the UI homepage skeleton
Урок 21.
00:17:38
5.2. Creating the link creation API endpoint
Урок 22.
00:21:48
5.3. Creating a link via the UI
Урок 23.
00:04:00
5.4. Creating the API endpoint to fetch all links
Урок 24.
00:09:02
5.5. Retrieving and displaying links in the UI
Урок 25.
00:06:57
5.6. Creating the link update API endpoint
Урок 26.
00:10:35
5.7. Supporting link updates in the UI
Урок 27.
00:04:13
5.8. Creating the link deletion API endpoint
Урок 28.
00:06:42
5.9. Deleting a link in the UI
Урок 29.
00:21:50
6.1. Creating the TagSelector component
Урок 30.
00:18:25
6.2. Supporting tags in the link creation API endpoint
Урок 31.
00:14:17
6.3. Adding tags to link creation on the UI
Урок 32.
00:06:42
6.4. Supporting tags in the link update API endpoint
Урок 33.
00:04:38
6.5. Adding tags to link updates on the UI
Урок 34.
00:03:48
7.1. Supporting searching and sorting on the API
Урок 35.
00:09:29
7.2. Searching and sorting links within the UI
Урок 36.
00:03:04
7.3. Supporting tag filtering on the API
Урок 37.
00:08:10
7.4. Filtering links by tags on the UI
Урок 38.
00:04:26
8.1. Installing dependencies and creating starter files
Урок 39.
00:14:20
8.2. Configuring Webpack for the extension environment
Урок 40.
00:07:59
8.3. Creating the extension manifest
Урок 41.
00:05:14
9.1. Setting up the base containers
Урок 42.
00:14:10
9.2. Injecting a React app using Content Scripts
Урок 43.
00:05:58
9.3. Supporting extension authentication on the UI and API
Урок 44.
00:12:47
9.4. Requiring authentication in the extension and leveraging the Storage API
Урок 45.
00:19:54
9.5. Creating the LinkManager interface
Урок 46.
00:06:42
9.6. Connecting the LinkManager to the API
Урок 47.
00:08:00
9.7. Supporting tags within the LinkManager
Урок 48.
00:10:11
9.8. Deleting saved links and improving the user experience with Context Menus
Урок 49.
00:21:59
9.9. Creating an Options page for managing extension settings
Урок 50.
00:05:30
10.1. Deploying the UI
Урок 51.
00:06:58
10.2. Deploying the API
Урок 52.
00:10:54
10.3. Preparing and publishing the Chrome Extension
Урок 53.
00:02:25
11.1. Next steps and enhancement ideas
Урок 54.
00:00:52
11.2. Wrap up
Автор - Ryan Fitzgerald
Ryan Fitzgerald
С более чем десятилетним опытом разработки Chrome-расширений и масштабируемых веб-приложений, я глубоко разбираюсь в экосистеме Chrome Extensions.Я создал и опубликовал несколько расширений в Chrome Web Store, привлекая тысячи активных пользователей и совершенствуя лучшие практики разработки. Помимо этого, я разработал ExtensionKit - универсальный набор примеров и шаблонов, упрощающий создание расширений. Мой курс "Основы разработки Chrome-р
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
Запустите своё расширение для Chrome за часы, а не недели. Шаблон для занятых разработчиков, чтобы быстро запустить ваши расширения Chrome на React. Вам не нужно изобретать колесо и программировать всё самостоятельно.
Создайте Full-Stack Chrome расширение с помощью NodeJS и MongoDB
Build a Full-Stack Chrome Extension with NodeJS and MongoDB
В этом курсе мы будем разрабатывать новое расширение Chrome, которое парсит Amazon и автоматически сохраняет данные о продуктах в базе данных MongoDB. Наш готовый продукт (который вы сможете опубликовать в Chrome Store) будет расширением Chrome, которое позволит любому пользователю сохранять свою историю покупок Amazon, результаты любого URL-адреса поиска Amazon или результаты нескольких ключевых слов поиска Amazon. - один за другим.
+6
Создание мультиплатформенных браузерных расширений