Связь между различными частями расширения для браузера Chrome является одним из основных аспектов разработки расширения для браузера. Этот пост посвящен передаче сообщений между сценарием контента, фоном и контентом (действие браузера). Проще говоря, как скрипт в рамках веб-сайта общается с расширением или наоборот.
Прежде чем мы перейдем к теме, я хочу обрисовать довольно распространенную модель общения, которая используется. Все обработчики событий получают объект события, содержащий свойство данных, включая данные, отправленные как часть сообщения. Модель события в основном основана на onMessage и postMessage.
Расширения имеют несколько компонентов для выполнения различных действий. Наиболее распространенными являются сценарий контента и фоновый сценарий.
Давайте кратко рассмотрим их.
Фоновый скрипт — этот скрипт работает независимо от веб-сайта. Скрипты запускаются в фоновом режиме расширения и продолжают работать до тех пор, пока расширение не будет выгружено из браузера. Подробнее о документации Google здесь.
Action Script — локальный файл JavaScript для расширения DOM. Подробнее о скрипте действия здесь.
Скрипт контента — это JavaScript, внедряемый расширением на веб-страницу. Инъекция может быть нацелена на одну или несколько веб-страниц. Этот сценарий действует как посредник между DOM веб-сайта и действиями фонового сценария. Подробнее здесь.
Примечание. Я использовал Manifest V2 вместе с этой статьей, и все нюансы относятся к V2.
Поскольку расширения Chrome управляются событиями из-за своей архитектуры, как только внедренные скрипты получают доступ к переменным и функциям страницы, они могут передать их скрипту контента.
Сценарий контента затем передает эти объекты на фоновую страницу.
И, наконец, сценарий действия может вызывать фоновую страницу с помощью Extension API и передавать ее в Extension DOM.
Теперь давайте создадим простое расширение, задача которого — печатать показатели производительности веб-приложения. Расширение будет получать показатели производительности от глобального объекта в окне и передавать их сценарию действий для отображения в DOM, DOM расширения.
Начнем со сценария содержимого, давайте начнем кодировать. Вставьте скрипт содержимого в DOM веб-приложения.
Скрипт контента теперь также должен начать прослушивать сообщения. По сути, из сценария, работающего в контексте веб-приложения. Создание сценария контента в качестве коммуникатора переднего плана или посредника в архитектуре расширения.
Когда сообщение получено сценарием содержимого из пользовательского/внедренного сценария, выполняется быстрая проверка источника события, а затем мы просто используем API среды выполнения расширения Chrome для отправки данных в фоновый сценарий расширения.
Теперь давайте посмотрим, как выглядит внедренный пользовательский скрипт, который работает в контексте на уровне веб-приложения. Мы знаем, что этот скрипт имеет доступ к оконным функциям и переменным. Итак, давайте возьмем требуемый объект из контекста страницы.
Полученные данные о производительности теперь отправляются почтовым сообщением. Пользовательский сценарий использует функцию window.postMessage для безопасного общения. Чтобы наблюдать за промежуточными изменениями в данных о производительности, мы добавим временной интервал. Хотя иронично использовать интервал для наблюдения за показателями производительности, поэтому в реальном мире это не рекомендуется.
Теперь мы находимся в фоновом сценарии.
Фоновый сценарий прослушивает любое сообщение, транслируемое сценарием контента через Chrome Runtime API, по сути, при получении события мы можем использовать tabId в качестве идентификатора для каждой вкладки. и сопоставьте основные данные с. Объект окна фонового скрипта будет хранить детали в памяти.
Сценарий действия — это то, что, наконец, считывает данные, чтобы добавить их к расширению DOM и предоставить пользователю показатели производительности веб-приложения.
Во всплывающем сценарии данные о производительности извлекаются из контекста фонового сценария. Используя getBackgroundPage, через определенные промежутки времени извлекаются сведения о текущей странице.
Таким образом, мы, наконец, получим важные данные о производительности, необходимые для их отображения пользователю через DOM расширения, то есть через всплывающую страницу. Стиль пользовательского интерфейса и рендеринг в расширении DOM можно настроить по мере необходимости. Теперь все, что у нас есть, это метрики для рендеринга.
Заключительные мысли
Расширение Chrome или любое современное расширение браузера — это мощный инструмент, предоставляемый браузером, и, используя концепцию обмена сообщениями между приложением и расширением, он может решать сложные проблемы.
У меня была возможность поработать над общением в расширении chrome для одного из наших вариантов использования в Whatfix. Надеемся, что это простое пошаговое руководство сэкономит время и даст представление о концепции.
Я настоятельно рекомендую создать расширение и игровую площадку с конфигурацией и кодом.
Чао, удачного кодирования!
