Chrome Extension - введение в разработку браузерных расширений #easyit
Рассматриваем самые базовые, ключевые моменты разработки расширений для браузера на примере э кстеншена для браузера Chrome. Изложен достаточный объем материала для того, чтобы приступить к разработке собственного расширения. Возможно даже без публикации его в магазине расширений. 00:00 Вступление 01:00 Что из себя представляют расширения браузера 02:49 Ключевые понятия 04:25 Краткий обзор типов модулей и структуры и содержания документации 05:05 Настройка браузера для разработки и тестирования 05:45 Разбор содержимого файла manifest.json 08:14 Документация по разрешениям 09:58 Структура файлов расширения 10:55 Файл hello.html 12:29 Файл background.js 14:57 Обработчик команд 17:48 Установка расширения с диска 18:18 Запуск стартового файла расширения 19:32 Обработка событий на стартовой странице. 20:49 Карточка расширения на странице расширений браузера 21:10 Как отлаживать фоновый процесс background.js 21:50 Добавление кнопки расширения на панель браузера. 22:19 Popup меню расширения, откуда берется как работает 25:05 Описание создания alarm оповещений. 25:38 Содержимое выпадающего меню расширения 26:00 Модификация стилей для страницы popup 26:46 Обновление расширения после модификации кода 28:00 Программное открытие внутренних страниц расширения 28:30 Страница настроек приложения 30:03 Как отлаживать страницы, создаваемые расширением 30:28 Включения и отключения инъекции кода в чужие страницы 32:43 Индикация статуса на кнопке расширения 33:12 Разбор кода реализации включения и отключения опции и индикации на кнопке 34:40 Как работает вставка нашего кода в чужие страницы 35:50 Подписка на изменения в хранилище storadge 36:15 Разбор кода замены фонового цвета страницы 38:00 Использование модуля scripting для выполнения кода на чужой странице 40:00 Трюк для замены и восстановления значения фонового цвета 43:00 Разбор как работают команды (клавиатурные комбинации) 44:46 Настройка разрешения нотификаций на MacOS 45:35 Разбор реализации и работы напоминаний 49:33 Демонстрация работы оповещений 50:17 Получено уведомление, разбор содержимого 51:11 Получение информации об ошибках в фоновом процессе расшинения 52:08 Подготовка расширения к публикации в магазине расширений Исходные файлы проекта здесь: https://github.com/easy-linux/Vanilla...
Документация для разработчиков: https://developer.chrome.com/docs/ext...
Связанные видео: • Web worker - как распараллелить вычислени... • Service worker - управление обработкой за... • О промисах простыми словами • О промисах простыми словами - часть 2 Сериал "Создание SPA приложения на чистом JS": • SPA приложение на чистом JS - часть 1 #eas... Видео по работе с vite.js: • Знакомимся с Vitejs. Портирование проекта,... Полезные видео по настройке webpack: Минимальная конфигурация - • Настраиваем сборку проекта с помощью webpack Настройка горячей перезагрузки - • Webpack 5 Настройка горячей перезагрузки |... Настройка сборки проекта с подгрузкой файлов css/scss/изображений - • Webpack 5 Настройка сборки проекта с подгр... Настройка сборки мультистраничного сайта - • Пример конфигурации сборки мульти-страничн... Самый простой способ установить nodejs на Linux и Mac: • Установка Nodejs на Linux и MacOS. #easyit #javascript #js #vanillajs #jsworkers
