Цель

Это стандартное расширение предоставляет разработчикам отправную точку для создания собственных расширений Chrome с использованием Manifest V3.

Что нового

Самое большое улучшение в этой версии — добавление всплывающего интерфейса. Теперь, когда пользователи нажимают кнопку расширения в верхней панели браузера, им открывается интерактивное всплывающее окно, а не просто регистрируется сообщение в консоли.

Функции

Этот шаблон демонстрирует три ключевых варианта поведения расширения:

1. Перед загрузкой страницы: распечатайте сообщение в консоли DevTools до загрузки страницы.
2. После загрузки страницы: печать сообщения на консоли DevTools до загрузки страницы.
3. Взаимодействие со всплывающим окном: отображает всплывающее окно, когда пользователь нажимает кнопку расширения, что позволяет осуществлять более сложное взаимодействие с пользователем.

Расширение теперь предоставляет кнопку во всплывающем окне, при нажатии на которую в активную вкладку вставляется скрипт для изменения DOM и записи сообщения на консоль.

Установка

1. Клонируйте или загрузите файлы с github.com/llagerlof/fresh-chrome-extension и поместите их в каталог.
2. Откройте страницу расширения вашего браузера: chrome://extensions
3. Включите «Режим разработчика» в правом верхнем углу.
4. Нажмите «Загрузить распакованное» и выберите каталог расширения.

Как это проверить

1. Откройте любой веб-сайт.
2. Нажмите кнопку расширения на верхней панели браузера. Вы увидите всплывающее окно с кнопкой.
3. Нажмите кнопку во всплывающем окне с надписью «Нажмите эту кнопку, чтобы добавить оранжевый элемент div на страницу».
4. Обратите внимание на следующие изменения:
   • Вверху страницы появится оранжевый элемент div с сообщением «DOM изменен!»
   • Откройте инструменты разработчика (F12) и посмотрите на консоль. Вы увидите сообщение «Действие выполнено из всплывающего окна!»

Этот шаблон обеспечивает прочную основу для создания более сложных расширений Chrome. Не стесняйтесь изменять и расширять его в соответствии с вашими потребностями.

Удачного программирования!