Полное руководство | Создание расширения Chrome в Typescript и Vite

• Создание простого расширения для Chrome с использованием TypeScript, React и Vite.  

• Расширение будет изменять цвет фона веб-страницы при нажатии на иконку.  

• Видео будет пошаговым руководством с итеративным подходом.  

• Создание простого расширения, добавление значка и метаданных.  

• Использование Vite и TypeScript для улучшения пользовательского интерфейса.  

• Объяснение работы расширений Chrome: HTML, CSS, JavaScript.  

• Три контекста выполнения JavaScript: всплывающее окно, сервисный работник и контент-скрипт.  

• Каждый контекст имеет свои особенности и разрешения.  

• Загрузка расширения через "Управление расширениями" в Chrome.  

• Создание файла манифеста для базового расширения.  

• Добавление значка и версии в файл манифеста.  

• Добавление фонового скрипта для реагирования на события.  

• Использование API Chrome для выполнения действий.  

• Пример использования API для отображения сообщения при нажатии на расширение.  

• Прослушивание события onclicked в расширении.  

• Использование API действий Chrome для выполнения скрипта в контексте вкладки.  

• Добавление API действий в файл манифеста.  

• Использование chrome.scripting API для выполнения скриптов.  

• Добавление разрешений в файл манифеста для запуска скриптов.  

• Указание хостов, на которых может выполняться скрипт.  

• Перезагрузка расширения для проверки.  

• Проверка работы скрипта на примере веб-страницы.  

• Запуск обработчика события onclicked.  

• Создание HTML-файла для всплывающего окна.  

• Настройка объекта actions в файле манифеста.  

• Перезагрузка расширения и проверка работы всплывающего окна.  

• Создание HTML-файла с кнопкой и скриптом.  

• Загрузка скриптов и выполнение их в контексте всплывающего окна.  

• Краткое описание текущего расширения.  

• Переход к TypeScript и React для улучшения разработки.  

• Создание нового приложения с использованием veet и TypeScript.  

• Сборка и запуск приложения в рабочей среде.  

• Подготовка файлов для загрузки в Google Chrome.  

• Создание папки на диске и добавление ее в Google Chrome.  

• Создание манифеста JSON для расширения Chrome.  

• Копирование файлов из общей папки в папку на диске.  

• Загрузка папки на диске в Chrome как расширения.  

• Открытие расширения и проверка его работы.  

• Настройка всплывающего окна с помощью HTML-файла.  

• Добавление прав доступа к скриптам и хостингу.  

• Возвращение иконки в общую папку.  

• Сборка приложения с помощью npm run.  

• Проверка наличия запятой в манифесте.  

• Перезагрузка расширения и проверка значка.  

• Изменение кода приложения для выполнения действий при нажатии кнопки.  

• Использование API Chrome для выполнения функций.  

• Установка пакета types for chrome для улучшения типов.  

• Изменение цвета фона страницы при нажатии кнопки.  

• Создание документа.body.style для изменения цвета.  

• Проверка работы изменения цвета фона.  

• Создание HTML-ввода для выбора цвета.  

• Передача переменной цвета в скрипт через аргументы.  

• Проверка работы выбора цвета и его применения.  

• Перезагрузите расширение для Chrome.  

• Откройте сайт example.com и выберите цвет.  

• Нажмите кнопку "Мне" для установки цвета фона страницы.  

• Перейдите на другой сайт, например, train2code.com.  

• Нажмите кнопку "Мне" для изменения цвета фона страницы.  

• Расширение изменяет цвет фона на выбранный цвет.  

• Краткое руководство по созданию расширений для Chrome.  

• Ссылка на курс по созданию расширений.  

• Предложение посмотреть следующее видео о запуске TypeScript в VS Code.  

• Представление автора, Джеймса Чарльзворта.