Рассматриваем самые базовые, ключевые моменты разработки расширений для браузера на примере э кстеншена для браузера 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 Подготовка расширения к публикации в магазине расширений
Исходные файлы проекта здесь:
[ Ссылка ]
Документация для разработчиков:
[ Ссылка ]
Связанные видео:
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
[ Ссылка ]
Сериал "Создание SPA приложения на чистом JS":
[ Ссылка ]
Видео по работе с vite.js:
[ Ссылка ]
Полезные видео по настройке webpack:
Минимальная конфигурация - [ Ссылка ]
Настройка горячей перезагрузки - [ Ссылка ]
Настройка сборки проекта с подгрузкой файлов css/scss/изображений - [ Ссылка ]
Настройка сборки мультистраничного сайта - [ Ссылка ]
Самый простой способ установить nodejs на Linux и Mac:
[ Ссылка ]
#easyit #javascript #js #vanillajs #jsworkers
