32 KiB

Raw Blame History Unescape Escape

Проект расширения для браузера, часть 1: Все о браузерах

Скетчноут от Wassim Chegham

Викторина перед лекцией

Введение

Расширения для браузера — это мини-приложения, которые улучшают ваш опыт работы в интернете. Как и первоначальное видение Тима Бернерса-Ли об интерактивной сети, расширения расширяют возможности браузера за пределы простого просмотра документов. От менеджеров паролей, которые обеспечивают безопасность ваших аккаунтов, до инструментов выбора цвета, которые помогают дизайнерам находить идеальные оттенки, расширения решают повседневные задачи при работе в интернете.

Прежде чем мы начнем создавать ваше первое расширение, давайте разберемся, как работают браузеры. Точно так же, как Александру Грэхему Беллу нужно было понять передачу звука перед изобретением телефона, знание основ работы браузеров поможет вам создавать расширения, которые будут интегрироваться с существующими системами браузеров.

К концу этого урока вы поймете архитектуру браузеров и начнете создавать свое первое расширение.

Понимание веб-браузеров

Веб-браузер — это, по сути, сложный интерпретатор документов. Когда вы вводите "google.com" в адресной строке, браузер выполняет сложную серию операций — запрашивает контент с серверов по всему миру, а затем анализирует и отображает этот код в виде интерактивных веб-страниц, которые вы видите.

Этот процесс напоминает, как первый веб-браузер WorldWideWeb был разработан Тимом Бернерсом-Ли в 1990 году, чтобы сделать гиперссылочные документы доступными для всех.

✅ Немного истории: Первый браузер назывался 'WorldWideWeb' и был создан сэром Тимоти Бернерсом-Ли в 1990 году.

Некоторые ранние браузеры, via Karen McGrane

Как браузеры обрабатывают веб-контент

Процесс между вводом URL и отображением веб-страницы включает несколько согласованных шагов, которые происходят за считанные секунды:

sequenceDiagram
    participant User
    participant Browser
    participant DNS
    participant Server
    
    User->>Browser: Types URL and presses Enter
    Browser->>DNS: Looks up server IP address
    DNS->>Browser: Returns IP address
    Browser->>Server: Requests web page content
    Server->>Browser: Sends HTML, CSS, and JavaScript
    Browser->>User: Renders complete web page

Что выполняет этот процесс:

Переводит читаемый человеком URL в IP-адрес сервера через DNS-запрос
Устанавливает безопасное соединение с веб-сервером с использованием протоколов HTTP или HTTPS
Запрашивает конкретный контент веб-страницы с сервера
Получает HTML-разметку, стили CSS и код JavaScript с сервера
Отображает весь контент в интерактивной веб-странице, которую вы видите

Основные функции браузера

Современные браузеры предоставляют множество функций, которые разработчики расширений могут использовать:

Функция	Назначение	Возможности для расширений
Движок рендеринга	Отображает HTML, CSS и JavaScript	Модификация контента, внедрение стилей
Движок JavaScript	Выполняет код JavaScript	Пользовательские скрипты, взаимодействие с API
Локальное хранилище	Сохраняет данные локально	Пользовательские настройки, кэшированные данные
Сетевой стек	Обрабатывает веб-запросы	Мониторинг запросов, анализ данных
Модель безопасности	Защищает пользователей от вредоносного контента	Фильтрация контента, улучшение безопасности

Понимание этих функций помогает вам:

Определить, где ваше расширение может принести наибольшую пользу
Выбрать правильные API браузера для функциональности вашего расширения
Разработать расширения, которые эффективно работают с системами браузера
Обеспечить, чтобы ваше расширение соответствовало лучшим практикам безопасности браузера

Особенности разработки для разных браузеров

Разные браузеры реализуют стандарты с небольшими вариациями, как разные языки программирования могут по-разному обрабатывать один и тот же алгоритм. Chrome, Firefox и Safari имеют уникальные характеристики, которые разработчики должны учитывать при разработке расширений.

💡 Совет: Используйте caniuse.com, чтобы проверить, какие веб-технологии поддерживаются в разных браузерах. Это незаменимо при планировании функций вашего расширения!

Основные моменты для разработки расширений:

Тестируйте ваше расширение в браузерах Chrome, Firefox и Edge
Адаптируйтесь к различным API расширений и форматам манифестов
Учитывайте различия в производительности и ограничениях
Предусмотрите альтернативы для функций, специфичных для браузеров, которые могут быть недоступны

✅ Аналитика: Вы можете определить, какие браузеры предпочитают ваши пользователи, установив пакеты аналитики в свои проекты веб-разработки. Эти данные помогут вам определить приоритеты поддержки браузеров.

Понимание расширений для браузеров

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

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

Популярные категории расширений и их преимущества:

Инструменты продуктивности: Менеджеры задач, приложения для заметок и трекеры времени, которые помогают вам оставаться организованным
Улучшение безопасности: Менеджеры паролей, блокировщики рекламы и инструменты конфиденциальности, которые защищают ваши данные
Инструменты для разработчиков: Форматеры кода, инструменты выбора цвета и утилиты для отладки, которые упрощают разработку
Улучшение контента: Режимы чтения, загрузчики видео и инструменты для создания скриншотов, которые улучшают ваш опыт работы в интернете

✅ Вопрос для размышления: Какие ваши любимые расширения для браузера? Какие конкретные задачи они выполняют и как они улучшают ваш опыт работы в интернете?

Установка и управление расширениями

Понимание процесса установки расширений помогает предвидеть пользовательский опыт при установке вашего расширения. Процесс установки стандартизирован во всех современных браузерах, с небольшими различиями в дизайне интерфейса.

Важно: Убедитесь, что включен режим разработчика и разрешена установка расширений из других магазинов при тестировании ваших собственных расширений.

Процесс установки расширений для разработки

Когда вы разрабатываете и тестируете свои собственные расширения, следуйте этому рабочему процессу:

# Step 1: Build your extension
npm run build

Что выполняет эта команда:

Компилирует исходный код в файлы, готовые для браузера
Упаковывает модули JavaScript в оптимизированные пакеты
Генерирует финальные файлы расширения в папке /dist
Готовит ваше расширение к установке и тестированию

Шаг 2: Перейдите на страницу управления расширениями браузера

Откройте страницу управления расширениями вашего браузера
Нажмите кнопку "Настройки и другое" (иконка ...) в правом верхнем углу
Выберите "Расширения" в выпадающем меню

Шаг 3: Загрузите ваше расширение

Для новых установок: Выберите load unpacked и выберите вашу папку /dist
Для обновлений: Нажмите reload рядом с уже установленным расширением
Для тестирования: Включите "Режим разработчика", чтобы получить доступ к дополнительным функциям отладки

Установка расширений для продакшена

✅ Примечание: Эти инструкции по разработке предназначены специально для расширений, которые вы создаете сами. Чтобы установить опубликованные расширения, посетите официальные магазины расширений браузеров, такие как Microsoft Edge Add-ons store.

Понимание различий:

Установки для разработки позволяют тестировать неопубликованные расширения во время разработки
Установки из магазина предоставляют проверенные, опубликованные расширения с автоматическими обновлениями
Сторонняя установка позволяет устанавливать расширения вне официальных магазинов (требуется режим разработчика)

Создание расширения для углеродного следа

Мы создадим расширение для браузера, которое отображает углеродный след использования энергии в вашем регионе. Этот проект демонстрирует основные концепции разработки расширений, создавая при этом практичный инструмент для повышения экологической осведомленности.

Этот подход следует принципу "обучение через действие", который доказал свою эффективность с тех пор, как Джон Дьюи разработал свои образовательные теории — сочетание технических навыков с значимыми реальными приложениями.

Требования к проекту

Прежде чем начать разработку, давайте соберем необходимые ресурсы и зависимости:

Требуемый доступ к API:

CO2 Signal API key: Введите ваш адрес электронной почты, чтобы получить бесплатный ключ API
Код региона: Найдите код вашего региона, используя Electricity Map (например, для Бостона используется 'US-NEISO')

Инструменты разработки:

Node.js и NPM: Инструмент управления пакетами для установки зависимостей проекта
Стартовый код: Скачайте папку start, чтобы начать разработку

✅ Узнать больше: Улучшите свои навыки управления пакетами с помощью этого подробного модуля обучения

Понимание структуры проекта

Понимание структуры проекта помогает организовать работу над разработкой эффективно. Как библиотека Александрийская была организована для легкого поиска знаний, хорошо структурированный код делает разработку более продуктивной:

project-root/
├── dist/                    # Built extension files
│   ├── manifest.json        # Extension configuration
│   ├── index.html           # User interface markup
│   ├── background.js        # Background script functionality
│   └── main.js              # Compiled JavaScript bundle
└── src/                     # Source development files
    └── index.js             # Your main JavaScript code

Разбор того, что выполняет каждый файл:

manifest.json: Определяет метаданные расширения, разрешения и точки входа
index.html: Создает пользовательский интерфейс, который появляется при клике на расширение
background.js: Обрабатывает фоновые задачи и слушатели событий браузера
main.js: Содержит финальный скомпилированный JavaScript после процесса сборки
src/index.js: Содержит основной код разработки, который компилируется в main.js

💡 Совет по организации: Сохраните ваш API-ключ и код региона в безопасной заметке для удобного доступа во время разработки. Вам понадобятся эти значения для тестирования функциональности вашего расширения.

✅ Примечание по безопасности: Никогда не добавляйте API-ключи или конфиденциальные данные в ваш репозиторий кода. Мы покажем, как безопасно работать с ними на следующих этапах.

Создание интерфейса расширения

Теперь мы создадим компоненты пользовательского интерфейса. Расширение использует двухэкранный подход: экран настройки для первоначальной конфигурации и экран результатов для отображения данных.

Это соответствует принципу прогрессивного раскрытия, используемому в дизайне интерфейсов с ранних дней вычислительной техники — предоставление информации и опций в логической последовательности, чтобы не перегружать пользователей.

Обзор экранов расширения

Экран настройки — конфигурация для первого использования:

Экран результатов — отображение данных об углеродном следе:

Создание формы настройки

Форма настройки собирает данные конфигурации пользователя при первом использовании. После настройки эта информация сохраняется в хранилище браузера для будущих сеансов.

В файле /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>

Что выполняет эта форма:

Создает семантическую структуру формы с правильными метками и ассоциациями ввода
Включает функцию автозаполнения браузера для улучшения пользовательского опыта
Требует, чтобы оба поля были заполнены перед отправкой, используя атрибут required
Организует поля ввода с описательными именами классов для удобного стилизования и работы с JavaScript
Предоставляет четкие инструкции для пользователей, которые настраивают расширение впервые

Создание области отображения результатов

Далее создайте область результатов, которая будет показывать данные об углеродном следе. Добавьте этот 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>

Разбор того, что предоставляет эта структура:

loading: Отображает сообщение о загрузке, пока данные API извлекаются
errors: Показывает сообщения об ошибках, если запросы к API не удались или данные недействительны
data: Содержит необработанные данные для целей отладки во время разработки
result-container: Представляет отформатированную информацию об углеродном следе пользователям
clear-btn: Позволяет пользователям изменить свой регион и перенастроить расширение

Настройка процесса сборки

Теперь установим зависимости проекта и протестируем процесс сборки:

npm install

Что выполняет этот процесс установки:

Скачивает Webpack и другие зависимости разработки, указанные в package.json
Настраивает цепочку инструментов сборки для компиляции современного JavaScript
Готовит среду разработки для создания и тестирования расширений
Включает функции упаковки кода, оптимизации и совместимости с браузерами

💡 Инсайт о процессе сборки: Webpack упаковывает ваш исходный код из /src/index.js в /dist/main.js. Этот процесс оптимизирует ваш код для продакшена и обеспечивает совместимость с браузерами.

Тестирование вашего прогресса

На этом этапе вы можете протестировать ваше расширение:

Запустите команду сборки для компиляции вашего кода
Загрузите расширение в ваш браузер, используя режим разработчика
Убедитесь, что форма отображается корректно и выглядит профессионально
Проверьте, что все элементы формы правильно выровнены и функциональны

Что вы достигли:

Создали базовую HTML-структуру для вашего расширения
Создали интерфейсы настройки и результатов с правильной семантической разметкой
Настроили современный рабочий процесс разработки с использованием стандартных инструментов отрасли
Подготовили основу для добавления интерактивной функциональности JavaScript

Вы завершили первый этап разработки расширения для браузера. Как братья Райт сначала должны были понять аэродинамику перед тем, как добиться полета, понимание этих основополагающих концепций готовит вас к созданию более сложных интерактивных функций в следующем уроке.

Вызов GitHub Copilot Agent 🚀

Воспользуйтесь режимом Agent, чтобы выполнить следующий вызов: Описание: Улучшите расширение для браузера, добавив функции проверки форм и обратной связи с пользователем, чтобы улучшить пользовательский опыт при вводе API-ключей и кодов региона.

Задание: Создайте функции проверки на JavaScript, которые проверяют, содержит ли поле API-ключа не менее 20 символов, а код региона соответствует правильному формату (например, 'US-NEISO'). Добавьте визуальную обратную связь, изменяя цвет границы ввода на зеленый для корректных данных и красный для некорректных. Также добавьте функцию переключения для отображения/скрытия API-ключа в целях безопасности.

Узнайте больше о режиме агента здесь.

🚀 Задача

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

Викторина после лекции

Обзор и самостоятельное изучение

На этом уроке вы узнали немного о истории веб-браузеров; воспользуйтесь этой возможностью, чтобы узнать, как создатели Всемирной паутины представляли ее использование, прочитав больше о ее истории. Полезные сайты включают:

История веб-браузеров

История Всемирной паутины

Интервью с Тимом Бернерсом-Ли

Задание

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

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

32 KiB Raw Blame History Unescape Escape