16 KiB

Raw Permalink Blame History Unescape Escape

Проєкт розширення для браузера Частина 1: Все про браузери

Скетчноут від Wassim Chegham

Тест перед лекцією

Вступ

Розширення для браузера додають додаткову функціональність до браузера. Але перед тим, як створювати одне з них, варто трохи дізнатися про те, як браузери виконують свою роботу.

Про браузер

У цьому циклі уроків ви навчитеся створювати розширення для браузера, яке працюватиме в Chrome, Firefox та Edge. У цій частині ви дізнаєтеся, як працюють браузери, і створите основні елементи розширення для браузера.

Але що таке браузер? Це програмне забезпечення, яке дозволяє кінцевому користувачеві отримувати контент із сервера та відображати його на веб-сторінках.

✅ Трохи історії: перший браузер називався 'WorldWideWeb' і був створений сером Тімоті Бернерсом-Лі у 1990 році.

Деякі ранні браузери, через Karen McGrane

Коли користувач підключається до інтернету за допомогою адреси URL (Uniform Resource Locator), зазвичай через протокол передачі гіпертексту http або https, браузер взаємодіє з веб-сервером і отримує веб-сторінку.

На цьому етапі механізм рендерингу браузера відображає її на пристрої користувача, який може бути мобільним телефоном, настільним комп'ютером або ноутбуком.

Браузери також мають можливість кешувати контент, щоб його не доводилося отримувати з сервера кожного разу. Вони можуть записувати історію активності користувача, зберігати 'cookies' — невеликі фрагменти даних, які містять інформацію про активність користувача, і багато іншого.

Важливо пам'ятати, що браузери не однакові! Кожен браузер має свої сильні та слабкі сторони, і професійний веб-розробник повинен розуміти, як зробити веб-сторінки ефективними для різних браузерів. Це включає роботу з маленькими екранами, такими як мобільні телефони, а також з користувачами, які перебувають офлайн.

Дуже корисний веб-сайт, який варто додати в закладки у вашому улюбленому браузері — caniuse.com. Коли ви створюєте веб-сторінки, дуже зручно використовувати списки підтримуваних технологій на цьому сайті, щоб найкраще підтримувати своїх користувачів.

✅ Як дізнатися, які браузери найпопулярніші серед користувачів вашого веб-сайту? Перевірте свою аналітику — ви можете встановити різні пакети аналітики як частину процесу веб-розробки, і вони покажуть вам, які браузери найчастіше використовуються.

Розширення для браузера

Чому варто створювати розширення для браузера? Це зручний інструмент, який можна прикріпити до браузера для швидкого доступу до завдань, які ви часто повторюєте. Наприклад, якщо вам потрібно перевіряти кольори на різних веб-сторінках, ви можете встановити розширення для вибору кольорів. Якщо вам важко запам'ятовувати паролі, ви можете використовувати розширення для управління паролями.

Розробка розширень для браузера також приносить задоволення. Вони зазвичай виконують обмежену кількість завдань, але роблять це дуже добре.

✅ Які ваші улюблені розширення для браузера? Які завдання вони виконують?

Встановлення розширень

Перед тим, як почати створювати розширення, ознайомтеся з процесом його створення та розгортання. Хоча кожен браузер трохи відрізняється у тому, як він управляє цим завданням, процес схожий у Chrome і Firefox на прикладі Edge:

Примітка: Переконайтеся, що увімкнули режим розробника та дозволили розширення з інших магазинів.

Суть процесу:

створіть своє розширення за допомогою npm run build
перейдіть у браузері до панелі розширень через кнопку "Налаштування та інше" (значок ...) у верхньому правому куті
якщо це нова установка, виберіть load unpacked, щоб завантажити нове розширення з його папки збірки (у нашому випадку це /dist)
або натисніть reload, якщо ви перезавантажуєте вже встановлене розширення

✅ Ці інструкції стосуються розширень, які ви створюєте самостійно; щоб встановити розширення, які вже випущені в магазин розширень браузера, перейдіть до відповідних магазинів і встановіть потрібне розширення.

Початок роботи

Ви створите розширення для браузера, яке показуватиме вуглецевий слід вашого регіону, відображаючи енергоспоживання вашого регіону та джерело енергії. Розширення матиме форму для введення ключа API, щоб ви могли отримати доступ до API CO2 Signal.

Вам потрібно:

ключ API; введіть свою електронну адресу у поле на цій сторінці, і вам буде надіслано ключ
код вашого регіону, який відповідає Electricity Map (наприклад, у Бостоні я використовую 'US-NEISO').
початковий код. Завантажте папку start; ви будете доповнювати код у цій папці.
NPM - NPM — це інструмент управління пакетами; встановіть його локально, і пакети, зазначені у вашому файлі package.json, будуть встановлені для використання у вашому веб-ресурсі

✅ Дізнайтеся більше про управління пакетами у цьому чудовому модулі Learn

Витратьте хвилину, щоб ознайомитися з кодовою базою:

✅ Як тільки у вас буде ключ API та код регіону, збережіть їх у нотатці для подальшого використання.

Створення HTML для розширення

Це розширення має два вигляди. Один для збору ключа API та коду регіону:

І другий для відображення вуглецевого споживання регіону:

Почнемо зі створення HTML для форми та її стилізації за допомогою CSS.

У папці /dist ви створите форму та область результатів. У файлі index.html заповніть область форми:

<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>

Це форма, де збережена інформація буде введена та збережена у локальному сховищі.

Далі створіть область результатів; під останнім тегом форми додайте кілька div:

<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>

На цьому етапі ви можете спробувати збірку. Переконайтеся, що встановили залежності пакета цього розширення:

npm install

Ця команда використовуватиме npm, менеджер пакетів Node, для встановлення webpack для процесу збірки вашого розширення. Ви можете побачити результат цього процесу, переглянувши /dist/main.js — ви побачите, що код був зібраний.

На даний момент розширення має зібратися, і якщо ви розгорнете його в Edge як розширення, ви побачите акуратно відображену форму.

Вітаємо, ви зробили перші кроки до створення розширення для браузера. У наступних уроках ви зробите його більш функціональним та корисним.

🚀 Виклик

Перегляньте магазин розширень для браузера та встановіть одне з них у свій браузер. Ви можете дослідити його файли цікавими способами. Що ви відкрили?

Тест після лекції

Огляд та самостійне навчання

У цьому уроці ви дізналися трохи про історію веб-браузера; скористайтеся цією можливістю, щоб дізнатися більше про те, як винахідники Всесвітньої павутини уявляли її використання, прочитавши більше про її історію. Деякі корисні сайти:

Історія веб-браузерів

Історія вебу

Інтерв'ю з Тімом Бернерсом-Лі

Завдання

Змініть стиль вашого розширення

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.

16 KiB Raw Permalink Blame History Unescape Escape