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

Рассматриваем самые базовые, ключевые моменты разработки расширений для браузера на примере э кстеншена для браузера Chrome. Изложен достаточный объем материала для того, чтобы приступить к разработке собственного расширения. Возможно даже без публикации его в магазине расширений.

00:00 Вступление
01:00 Что из себя представляют расширения браузера
02:49 Ключевые понятия
04:25 Краткий обзор типов модулей и структуры и содержания документации
05:05 Настройка браузера для разработки и тестирования
08:14 Документация по разрешениям
09:58 Структура файлов расширения
14:57 Обработчик команд
17:48 Установка расширения с диска
18:18 Запуск стартового файла расширения
19:32 Обработка событий на стартовой странице.
20:49 Карточка расширения на странице расширений браузера
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":

Полезные видео по настройке webpack:

Самый простой способ установить nodejs на Linux и Mac:

#easyit #javascript #js #vanillajs #jsworkers

[afk]

Респект за якісний контент. Аж, з'явилось бажання вивчати JS )

[googlyaminus]

Прям приятно слушать! Ничего лишнего. Спасибо.

[timashoff]

Волшебный канал и, к сожалению, так мало подписчиков! Только не забрасывайте, очень качественная подача

[iraarinushkina]

Спасибо, очень полезное видео! Всё чётко и по делу.

[awc]

отличное видео, так еще и код оставили на гитхабе. спасибо!

[SergiuBurduja-yl]

Какой ты крутой, я бы тебе памятник поставил бы😅

[zndesigner]

Спасибо за видео, а можно про публикацию расширения в маркете google chrome, я так понимаю что запакованное приложение не получится установить для другого пользователя?

[SergiuBurduja-yl]

Почему у вас нет плейлиста для расширений?

[spreenggg]

Подскажите, пожалуйста.
А хром позволяет работать с буфером обмена? А то я пытаюсь создать расширение для работы с буфером, а оно не в какую не работает(

[Тотсамыйборов-ей]

Доброй ночи, как с вами можно связаться?

[НиколайКалужских-щм]

напишите кто-нибудь комент с таймкодами, буду очень признателен