45 KiB

Raw Blame History Unescape Escape

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

journey
    title Your Browser Extension Development Journey
    section Foundation
      Understand browsers: 3: Student
      Learn extension types: 4: Student
      Setup development: 4: Student
    section Development
      Build interface: 4: Student
      Add functionality: 5: Student
      Handle data: 5: Student
    section Integration
      Test in browser: 5: Student
      Debug issues: 4: Student
      Polish experience: 5: Student

Скетч от Wassim Chegham

Тест перед лекцией

Введение

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

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

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

mindmap
  root((Browser Architecture))
    Core Components
      Rendering Engine
      JavaScript Engine
      Network Stack
      Storage APIs
    User Interface
      Address Bar
      Tab Management
      Bookmarks
      Extension Icons
    Extension System
      Manifest Files
      Content Scripts
      Background Pages
      Popup Windows
    Security Model
      Same-Origin Policy
      Permissions API
      Content Security
      Isolated Worlds
    Development Tools
      DevTools Integration
      Debug Console
      Performance Monitor
      Extension Inspector

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

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

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

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

Некоторые из первых браузеров, фото от Karen McGrane

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

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

sequenceDiagram
    participant User
    participant Browser
    participant Extension
    participant DNS
    participant Server
    
    User->>Browser: Types URL and presses Enter
    Browser->>Extension: Trigger beforeRequest event
    Extension->>Extension: Check if URL needs modification
    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->>Extension: Trigger beforeResponse event
    Extension->>Extension: Modify content if needed
    Browser->>User: Renders complete web page
    Extension->>User: Show extension UI updates

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

quadrantChart
    title Browser Extension Categories
    x-axis Simple --> Complex
    y-axis Personal Use --> Professional Tools
    quadrant-1 Developer Tools
    quadrant-2 Enterprise Solutions
    quadrant-3 Personal Utilities
    quadrant-4 Productivity Apps
    
    Ad Blockers: [0.3, 0.2]
    Password Managers: [0.7, 0.3]
    Color Pickers: [0.4, 0.8]
    Code Formatters: [0.8, 0.9]
    Note Taking: [0.6, 0.5]
    Video Downloaders: [0.5, 0.2]
    Time Trackers: [0.7, 0.6]
    Screenshot Tools: [0.4, 0.4]

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

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

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

🔄 Педагогическая проверка

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

✅ Объяснить, как браузеры обрабатывают веб-запросы и отображают контент
✅ Определить основные компоненты архитектуры браузера
✅ Понять, как расширения интегрируются с функциональностью браузера
✅ Осознать модель безопасности, которая защищает пользователей

Быстрый тест: Можете ли вы проследить путь от ввода URL до отображения веб-страницы?

DNS-запрос преобразует URL в IP-адрес
HTTP-запрос получает контент с сервера
Анализ обрабатывает HTML, CSS и JavaScript
Отображение выводит финальную веб-страницу
Расширения могут модифицировать контент на нескольких этапах

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

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

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

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

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

flowchart TD
    A[Write Code] --> B[Build Extension]
    B --> C{First Install?}
    C -->|Yes| D[Load Unpacked]
    C -->|No| E[Reload Extension]
    D --> F[Test Functionality]
    E --> F
    F --> G{Working Correctly?}
    G -->|No| H[Debug Issues]
    G -->|Yes| I[Ready for Users]
    H --> A
    I --> J[Publish to Store]
    
    style A fill:#e1f5fe
    style F fill:#e8f5e8
    style I fill:#f3e5f5
    style J fill:#fff3e0

# 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
├── package.json             # Project dependencies and scripts
└── webpack.config.js        # Build configuration

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

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.

🔄 Педагогическая проверка

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

✅ Можете ли вы объяснить назначение каждого файла в структуре проекта?
✅ Понимаете ли вы, как процесс сборки преобразует исходный код?
✅ Почему мы разделяем конфигурацию и результаты на разные секции интерфейса?
✅ Как структура формы поддерживает удобство использования и доступность?

Понимание рабочего процесса разработки: Теперь вы должны уметь:

Изменять HTML и CSS для интерфейса вашего расширения.
Запускать команду сборки для компиляции изменений.
Перезагружать расширение в браузере для тестирования обновлений.
Отлаживать проблемы с помощью инструментов разработчика в браузере.

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

Задача GitHub Copilot Agent 🚀

Используйте режим Agent, чтобы выполнить следующую задачу:

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

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

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

🚀 Задача

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

Тест после лекции

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

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

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

История веба

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

⚡ Что вы можете сделать за следующие 5 минут

Откройте страницу расширений Chrome/Edge (chrome://extensions) и изучите, что у вас установлено.
Посмотрите вкладку "Сеть" в инструментах разработчика вашего браузера при загрузке веб-страницы.
Попробуйте просмотреть исходный код страницы (Ctrl+U), чтобы увидеть структуру HTML.
Исследуйте любой элемент веб-страницы и измените его CSS в инструментах разработчика.

🎯 Что вы можете сделать за час

Пройдите тест после урока и разберитесь в основах браузеров.
Создайте базовый файл manifest.json для расширения браузера.
Разработайте простое расширение "Hello World", которое показывает всплывающее окно.
Протестируйте загрузку вашего расширения в режиме разработчика.
Изучите документацию по расширениям браузера для вашей целевой платформы.

📅 Ваш недельный путь к созданию расширения

Создайте функциональное расширение для браузера с реальной полезностью.
Узнайте о скриптах содержимого, фоновых скриптах и взаимодействии с всплывающими окнами.
Освойте API браузера, такие как storage, tabs и messaging.
Разработайте удобные интерфейсы для вашего расширения.
Протестируйте ваше расширение на разных веб-сайтах и в различных сценариях.
Опубликуйте ваше расширение в магазине расширений браузера.

🌟 Ваш месячный путь к разработке браузерных расширений

Создайте несколько расширений, решающих разные пользовательские задачи.
Изучите продвинутые API браузера и лучшие практики безопасности.
Внесите вклад в проекты с открытым исходным кодом для браузерных расширений.
Освойте кроссбраузерную совместимость и прогрессивное улучшение.
Создайте инструменты и шаблоны для разработки расширений, чтобы помочь другим разработчикам.
Станьте экспертом по разработке расширений для браузеров, помогая другим разработчикам.

🎯 Таймлайн вашего мастерства в разработке расширений для браузеров

timeline
    title Browser Extension Development Progression
    
    section Foundation (15 minutes)
        Browser Understanding: Core architecture
                              : Rendering process
                              : Extension integration points
        
    section Setup (20 minutes)
        Development Environment: Project structure
                               : Build tools configuration
                               : Browser developer mode
                               : Extension loading process
        
    section Interface Design (25 minutes)
        User Experience: HTML structure
                       : CSS styling
                       : Form validation
                       : Responsive design
        
    section Core Functionality (35 minutes)
        JavaScript Integration: Event handling
                              : API interactions
                              : Data storage
                              : Error handling
        
    section Browser APIs (45 minutes)
        Platform Integration: Permissions system
                            : Storage APIs
                            : Tab management
                            : Context menus
        
    section Advanced Features (1 week)
        Professional Extensions: Background scripts
                               : Content scripts
                               : Cross-browser compatibility
                               : Performance optimization
        
    section Publishing (2 weeks)
        Distribution: Store submission
                   : Review process
                   : User feedback
                   : Update management
        
    section Expert Level (1 month)
        Extension Ecosystem: Advanced APIs
                           : Security best practices
                           : Enterprise features
                           : Framework integration

🛠️ Резюме вашего инструментария для разработки расширений

После завершения этого урока у вас есть:

Знания архитектуры браузеров: Понимание движков рендеринга, моделей безопасности и интеграции расширений.
Среда разработки: Современный набор инструментов с Webpack, NPM и возможностями отладки.
Основы UI/UX: Семантическая HTML-структура с прогрессивными паттернами раскрытия.
Осведомленность о безопасности: Понимание разрешений браузера и безопасных методов разработки.
Кроссбраузерные концепции: Знания о совместимости и подходах к тестированию.
Интеграция API: Основа для работы с внешними источниками данных.
Профессиональный рабочий процесс: Стандартные процедуры разработки и тестирования.

Применение в реальном мире: Эти навыки напрямую применимы к:

Веб-разработке: Одностраничные приложения и прогрессивные веб-приложения.
Десктопным приложениям: Electron и веб-ориентированное программное обеспечение для ПК.
Мобильной разработке: Гибридные приложения и веб-ориентированные мобильные решения.
Корпоративным инструментам: Внутренние приложения для повышения производительности и автоматизации рабочих процессов.
Открытый код: Внесение вклада в проекты расширений для браузеров и веб-стандарты.

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

Задание

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

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

45 KiB Raw Blame History Unescape Escape

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

Тест перед лекцией

Введение

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

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

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

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

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

🔄 Педагогическая проверка

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

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

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

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

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

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

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

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

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

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

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

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

🔄 Педагогическая проверка

Задача GitHub Copilot Agent 🚀

🚀 Задача

Тест после лекции

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

⚡ Что вы можете сделать за следующие 5 минут

🎯 Что вы можете сделать за час

📅 Ваш недельный путь к созданию расширения

🌟 Ваш месячный путь к разработке браузерных расширений

🎯 Таймлайн вашего мастерства в разработке расширений для браузеров

🛠️ Резюме вашего инструментария для разработки расширений

Задание

45 KiB

Raw Blame History Unescape Escape