Створюємо Розширення для Google Chrome з React: Повний Путівник від Нуля
Вставка
- Опубліковано 11 лип 2024
- 🚀 В цьому навчальному відео ми пройдемо всі етапи створення розширення для браузера Google Chrome, використовуючи React, а також базові технології як JavaScript, HTML і CSS.
- Промодок на знижку від мене - Rudnyi24
- Школа англійської мови № 1 для Tech та Non-tech фахівців - surl.li/syqev
- UA-cam канал Solid English for IT & Business - / @solid_english_school
- Medium Stats хром розширення - chromewebstore.google.com/det...
📘 Що ви дізнаєтеся:
Що таке розширення для Chrome і навіщо вчиться їх створювати.
Основні компоненти, з яких складається розширення: background scripts, manifest file, content scripts і так далі.
Як використовувати create-chrome-ext для швидкого старту розробки на React.
Крок за кроком створення реального розширення, яке може бути використане в повсякденному веб-серфінгу.
🎨 До того ж ми розглянемо створення простого розширення на чистому JavaScript, HTML, і CSS, щоб ви могли зрозуміти базові принципи розробки розширень.
🔍 У відео буде показано практичний приклад розширення, що дозволяє отримувати та відображати додаткову аналітику з сайту medium.com.
✅ Підпишіться на наш канал та натисніть на дзвіночок, щоб не пропустити більше навчальних матеріалів, які допоможуть вам стати професіоналом у світі веб-розробки!
#ChromeExtension #ReactJS #WebDevelopment #Coding #Tutorial #JavaScript #HTML #css
00:00 Google Chrome розширення на React
01:29 Про автора
02:11 Що таке Chrome розширення?
03:16 План відео
03:41 Навіщо вчити як створювати розширення
05:22 Живий приклад
07:16 Школа англійської для IT фахівців
09:19 Огляд розширення
09:39 Як створювати розширення
10:45 З чого складається розширення
11:47 Створюємо найпростіше розширення
15:07 create-chrome-ext генератор
21:44 файлова структура розширення
27:01 background.js Service Worker
29:02 Архівація
30:35 Публікація в магазині
34:40 Оновлення реального розширення
Стати спонсором каналу:
/ @maksymrudnyi
Буду вдячний за підтримку каналу:
Patreon - / rudnyi
BuyMeACoffee - www.buymeacoffee.com/maksymru...
Mono Bank - send.monobank.ua/jar/6oqhydjLGp
або так - 5375 4114 0505 7287
Приват банк - 4627 0551 1331 6110
Давайте дружити:
Telegram ↣ t.me/maksymrudnyi
Telegram чат ↣ t.me/joinchat/H4AF4W4dfGeGepNQ
INSTAGRAM ↣ / maksym_rudnyi
TWITTER ↣ / maksymrudnyi
FACEBOOK ↣ / travelscode
WEB-SITE ↣ travelscode.com/
GITHUB ↣ github.com/MaksymRudnyi/
Другий UA-cam канал ↣ / travelscode - Наука та технологія
- Промодок на знижку від мене - Rudnyi24
- Школа англійської мови № 1 для Tech та Non-tech фахівців - surl.li/syqev
- UA-cam канал Solid English for IT & Business - ua-cam.com/channels/RCrEs8GTkKWmlAAQXNi-rQ.html
о, а я планував колись розібратися з цим
а тут Максим вже підігнав туторіал готовий, дякую!!!
Будь ласка, сподіваюсь буде корисно. З цими розширеннями можна робити крутецькі штуки.
Лайк поставив, додивлюсь потім)
дякую за контент українською , мені подобається подача матеріалу і сама тематика ) Велике Дякую за Вашу працю !!!!
Дякую. Радий чути.
Дякую за контент
Будь ласка.
Гарна ідея
Дякую. До того ж дуже корисна.
Якщо реджектять, чи пишуть причину, що саме їм не сподобалося?
Так, пишуть, але узагальнено, з посиланням на полісі. В мене було пару відмов, але в основному через свою неуважність, про що я у відео згадував. Збілдив проєкт і зжав його командою npm run zip що є в пакеті, а вона не додала файли білда. Вийшло я відправляв порожній проєкт практично. Відмовили бо був запит на permissions які в коді не використовувались. Тому потрібно запитувати мінімум різних permissions, і якщо в коді не використовуються, то і не додавати їх.
Дякую! Юзав аналогічну заготовку chrome-extension-cli - розширення пишеться на чистому html і js.
Які є переваги використання React для створення мінімального інтерфейсу? Чи це просто діло звички?
З переваг - це зручність створення складного застосунку. Хром розширення нічим не відрізняється від сайту. В моєму випадку там багато логіки, отримання даних з беку, кешування, виведення графіків на різні терміни та дати. Все це зробити на чистому JS дуже важко, багато мороки. Тут же просто беремо наші знання, вибираємо стейт менеджер, улюблений варіант роботи зі стилями і все працює.
Для створення мінімального - може і нема переваг, але тут сильно залежить що Ви маєте на увазі під мінімальним.
+++
!!!
@@MaksymRudnyi
)))
Популярні фреймворки, але без ангуляра 😭
ну так популярні, а не ангуляр)))
@@MaksymRudnyi в ангуляра більше зірочок в гіті ніж у в'ю :)
подтвердите свою личность, фууу, що за мова
ага, сам був в шоці коли відкрилась сторінка не українською. Довго шукав як переключити назад.