|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "0bb55e0b98600afab801eea115228873",
|
|
|
"translation_date": "2025-08-25T23:36:17+00:00",
|
|
|
"source_file": "5-browser-extension/1-about-browsers/README.md",
|
|
|
"language_code": "ru"
|
|
|
}
|
|
|
-->
|
|
|
# Проект расширения для браузера, часть 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`, браузер связывается с веб-сервером и получает веб-страницу.
|
|
|
|
|
|
На этом этапе движок рендеринга браузера отображает её на устройстве пользователя, будь то мобильный телефон, настольный компьютер или ноутбук.
|
|
|
|
|
|
Браузеры также могут кэшировать контент, чтобы не загружать его с сервера каждый раз. Они могут записывать историю посещений, сохранять "куки" — небольшие фрагменты данных, содержащие информацию о действиях пользователя, и многое другое.
|
|
|
|
|
|
Важно помнить, что браузеры не одинаковы! У каждого свои сильные и слабые стороны, и профессиональный веб-разработчик должен понимать, как сделать веб-страницы удобными для работы в разных браузерах. Это включает в себя адаптацию для небольших экранов, таких как экраны мобильных телефонов, а также для пользователей, которые находятся в оффлайн-режиме.
|
|
|
|
|
|
Очень полезный сайт, который стоит добавить в закладки в вашем любимом браузере, — это [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/); введите ваш email на этой странице, и ключ будет отправлен вам
|
|
|
- [код вашего региона](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) — инструмент для управления пакетами; установите его локально, и пакеты, указанные в вашем файле `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
|
|
|
<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:
|
|
|
|
|
|
```HTML
|
|
|
<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 как расширение, вы увидите аккуратно отображённую форму.
|
|
|
|
|
|
Поздравляем, вы сделали первые шаги к созданию расширения для браузера. В следующих уроках вы сделаете его более функциональным и полезным.
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 Задание
|
|
|
|
|
|
Зайдите в магазин расширений для браузера и установите одно из них. Вы можете изучить его файлы интересными способами. Что вы обнаружите?
|
|
|
|
|
|
## Викторина после лекции
|
|
|
|
|
|
[Викторина после лекции](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). Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода. |
