Chrome Extension - введение в разработку браузерных расширений
Рассматриваем самые базовые, ключевые моменты разработки расширений для браузера на примере э кстеншена для браузера 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...
Видео по работе с vite.js:
• Знакомимся с Vitejs. Портирование про...
Полезные видео по настройке webpack:
Минимальная конфигурация - • Настраиваем сборку проекта с помощью ...
Настройка горячей перезагрузки - • Webpack 5 Настройка горячей перезагру...
Настройка сборки проекта с подгрузкой файлов css/scss/изображений - • Webpack 5 Настройка сборки проекта с ...
Настройка сборки мультистраничного сайта - • Пример конфигурации сборки мульти-стр...
Самый простой способ установить nodejs на Linux и Mac:
• Установка Nodejs на Linux и MacOS.
#easyit #javascript #js #vanillajs #jsworkers
Смотрите видео Chrome Extension - введение в разработку браузерных расширений онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Easy IT 02 Декабрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 13,606 раз и оно понравилось 424 людям.