Описание
Пример расширения браузера Google Chrome пересылки сообщений между компонентами расширения:
- inject_script.js
- content_script.js
- background.js
- devtools.js
- popup.js
- options.js
Технологии
- JavaScript
- Chrome API
- Chrome DevTools
Установка
- Загрузить zip-архив репозитория или клонировать репозиторий
- Распаковать архив
- Открыть браузер Google Chrome и перейти в настройки расширений путем открытия в строке ввода url:
chrome://extensions/- В верхней правой части экрана включить радиобаттон: 'Режим разработчика'
- В верхней левой части экрана нажать кнопку 'Загружить распакованное расширение' и указать путь к папке '/extension' из п.2
Описание работы
Для демонстрации работы расширения необходимо:
- установить расширение;
- обновить веб-страницу, на которой происходит тестирование расширения;
В примере описано три пути отправки сообщений между компонентами, но возможно взаимодействие между всеми компонетами согласно используемому API.
Возможны несколько сценариев работы с расширением:
- демонстрация пересылки сообщений от модуля inject_script.js к модулю options.js через модуль content_script.js:
- нажать на кнопку расширения и открыть вкладку опций;
- вернуться к изначальной вкладке и нажать в любом месте веб-страницы;
- в окне успешной отправки сообщения нажать "ОК" и перейти на вкладку опций;
- на вкладке опций в списке будет показан текст, на который было нажатие ранее;
- демонстрация пересылки сообщений от страницы опций(options.js) расширения на вкладку 'Panel' в инструментах разработчика:
- нажать на кнопку расширения и открыть вкладку опций;
- открыть инструменты разработчика и перейти на вкладку 'Panel';
- перейти на вкладку опций, написать сообщение и отправить его;
- перейти на вкладку 'Panel' в инструментах разработчика - в списке будет отображено отправленное со страницы опций сообщение;
- демонстрация пересылки сообщений из попап-меню (popup.js) на вкладку 'Panel' в инструментах разработчика:
- открыть инструменты разработчика и перейти на вкладку 'Panel';
- открыть попап-окно и нажать кнопку "Отправить сообщение на вкладку DevTools";
- на вкладке 'Panel' в инструментах разработчика будет показано отправленное сообщение со временем отправки;
Схемы взаимодействия компонентов расширения
Диаграмма пересылки сообщений между компонентами расширения Message Sender
Схема пересылки сообщений между компонентами расширения Message Sender
Легенда: сплошной линией показаны запросы, пунктирной - ответы. А1 и А4 - только односторонние запросы без ответов.