# Проєкт розширення для браузера Частина 1: Все про браузери
> Скетчноут від [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Тест перед лекцією
[Тест перед лекцією](https://ff-quizzes.netlify.app/web/quiz/23)
### Вступ
Розширення для браузера додають додаткову функціональність до браузера. Але перед тим, як створювати одне з них, варто трохи дізнатися про те, як браузери виконують свою роботу.
### Про браузер
У цьому циклі уроків ви навчитеся створювати розширення для браузера, яке працюватиме в Chrome, Firefox та Edge. У цій частині ви дізнаєтеся, як працюють браузери, і створите основні елементи розширення для браузера.
Але що таке браузер? Це програмне забезпечення, яке дозволяє кінцевому користувачеві отримувати контент із сервера та відображати його на веб-сторінках.
✅ Трохи історії: перший браузер називався 'WorldWideWeb' і був створений сером Тімоті Бернерсом-Лі у 1990 році.
> Деякі ранні браузери, через [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
Коли користувач підключається до інтернету за допомогою адреси URL (Uniform Resource Locator), зазвичай через протокол передачі гіпертексту `http` або `https`, браузер взаємодіє з веб-сервером і отримує веб-сторінку.
На цьому етапі механізм рендерингу браузера відображає її на пристрої користувача, який може бути мобільним телефоном, настільним комп'ютером або ноутбуком.
Браузери також мають можливість кешувати контент, щоб його не доводилося отримувати з сервера кожного разу. Вони можуть записувати історію активності користувача, зберігати 'cookies' — невеликі фрагменти даних, які містять інформацію про активність користувача, і багато іншого.
Важливо пам'ятати, що браузери не однакові! Кожен браузер має свої сильні та слабкі сторони, і професійний веб-розробник повинен розуміти, як зробити веб-сторінки ефективними для різних браузерів. Це включає роботу з маленькими екранами, такими як мобільні телефони, а також з користувачами, які перебувають офлайн.
Дуже корисний веб-сайт, який варто додати в закладки у вашому улюбленому браузері — [caniuse.com](https://www.caniuse.com). Коли ви створюєте веб-сторінки, дуже зручно використовувати списки підтримуваних технологій на цьому сайті, щоб найкраще підтримувати своїх користувачів.
✅ Як дізнатися, які браузери найпопулярніші серед користувачів вашого веб-сайту? Перевірте свою аналітику — ви можете встановити різні пакети аналітики як частину процесу веб-розробки, і вони покажуть вам, які браузери найчастіше використовуються.
## Розширення для браузера
Чому варто створювати розширення для браузера? Це зручний інструмент, який можна прикріпити до браузера для швидкого доступу до завдань, які ви часто повторюєте. Наприклад, якщо вам потрібно перевіряти кольори на різних веб-сторінках, ви можете встановити розширення для вибору кольорів. Якщо вам важко запам'ятовувати паролі, ви можете використовувати розширення для управління паролями.
Розробка розширень для браузера також приносить задоволення. Вони зазвичай виконують обмежену кількість завдань, але роблять це дуже добре.
✅ Які ваші улюблені розширення для браузера? Які завдання вони виконують?
### Встановлення розширень
Перед тим, як почати створювати розширення, ознайомтеся з процесом його створення та розгортання. Хоча кожен браузер трохи відрізняється у тому, як він управляє цим завданням, процес схожий у Chrome і Firefox на прикладі Edge:
> Примітка: Переконайтеся, що увімкнули режим розробника та дозволили розширення з інших магазинів.
Суть процесу:
- створіть своє розширення за допомогою `npm run build`
- перейдіть у браузері до панелі розширень через кнопку "Налаштування та інше" (значок `...`) у верхньому правому куті
- якщо це нова установка, виберіть `load unpacked`, щоб завантажити нове розширення з його папки збірки (у нашому випадку це `/dist`)
- або натисніть `reload`, якщо ви перезавантажуєте вже встановлене розширення
✅ Ці інструкції стосуються розширень, які ви створюєте самостійно; щоб встановити розширення, які вже випущені в магазин розширень браузера, перейдіть до відповідних [магазинів](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) і встановіть потрібне розширення.
### Початок роботи
Ви створите розширення для браузера, яке показуватиме вуглецевий слід вашого регіону, відображаючи енергоспоживання вашого регіону та джерело енергії. Розширення матиме форму для введення ключа API, щоб ви могли отримати доступ до API CO2 Signal.
**Вам потрібно:**
- [ключ API](https://www.co2signal.com/); введіть свою електронну адресу у поле на цій сторінці, і вам буде надіслано ключ
- [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO').
- [початковий код](../../../../5-browser-extension/start). Завантажте папку `start`; ви будете доповнювати код у цій папці.
- [NPM](https://www.npmjs.com) - NPM — це інструмент управління пакетами; встановіть його локально, і пакети, зазначені у вашому файлі `package.json`, будуть встановлені для використання у вашому веб-ресурсі
✅ Дізнайтеся більше про управління пакетами у цьому [чудовому модулі Learn](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-77807-sagibbon)
Витратьте хвилину, щоб ознайомитися з кодовою базою:
dist
-|manifest.json (налаштування за замовчуванням тут)
-|index.html (HTML-розмітка фронтенду тут)
-|background.js (JS для фону тут)
-|main.js (згенерований JS)
src
-|index.js (ваш JS-код тут)
✅ Як тільки у вас буде ключ API та код регіону, збережіть їх у нотатці для подальшого використання.
### Створення HTML для розширення
Це розширення має два вигляди. Один для збору ключа API та коду регіону:
І другий для відображення вуглецевого споживання регіону:
Почнемо зі створення HTML для форми та її стилізації за допомогою CSS.
У папці `/dist` ви створите форму та область результатів. У файлі `index.html` заповніть область форми:
```HTML
```
Це форма, де збережена інформація буде введена та збережена у локальному сховищі.
Далі створіть область результатів; під останнім тегом форми додайте кілька div:
```HTML
loading...
Region:
Carbon Usage:
Fossil Fuel Percentage:
```
На цьому етапі ви можете спробувати збірку. Переконайтеся, що встановили залежності пакета цього розширення:
```
npm install
```
Ця команда використовуватиме npm, менеджер пакетів Node, для встановлення webpack для процесу збірки вашого розширення. Ви можете побачити результат цього процесу, переглянувши `/dist/main.js` — ви побачите, що код був зібраний.
На даний момент розширення має зібратися, і якщо ви розгорнете його в Edge як розширення, ви побачите акуратно відображену форму.
Вітаємо, ви зробили перші кроки до створення розширення для браузера. У наступних уроках ви зробите його більш функціональним та корисним.
---
## 🚀 Виклик
Перегляньте магазин розширень для браузера та встановіть одне з них у свій браузер. Ви можете дослідити його файли цікавими способами. Що ви відкрили?
## Тест після лекції
[Тест після лекції](https://ff-quizzes.netlify.app/web/quiz/24)
## Огляд та самостійне навчання
У цьому уроці ви дізналися трохи про історію веб-браузера; скористайтеся цією можливістю, щоб дізнатися більше про те, як винахідники Всесвітньої павутини уявляли її використання, прочитавши більше про її історію. Деякі корисні сайти:
[Історія веб-браузерів](https://www.mozilla.org/firefox/browsers/browser-history/)
[Історія вебу](https://webfoundation.org/about/vision/history-of-the-web/)
[Інтерв'ю з Тімом Бернерсом-Лі](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-dream-a-little-we-can-get-the-web-we-want)
## Завдання
[Змініть стиль вашого розширення](assignment.md)
---
**Відмова від відповідальності**:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.