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
Watch video Chrome Extension - введение в разработку браузерных расширений online without registration, duration hours minute second in high quality. This video was added by user Easy IT 02 December 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 13,606 once and liked it 424 people.