Chrome Extension - введение в разработку браузерных расширений #easyit #js #javascript

Рассматриваем самые базовые, ключевые моменты разработки расширений для браузера на примере э кстеншена для браузера 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