Отправка данных из content script в popup.html в Chrome

Быстрый ответ

Для передачи данных из content script примените метод chrome.runtime.sendMessage. А для приема этих данных в popup script используйте метод chrome.runtime.onMessage.

Content Script:

// Отправляем данные в popup script
chrome.runtime.sendMessage({data: "yourData"});

Popup Script:

// Принимаем данные из content script
chrome.runtime.onMessage.addListener((message) => {
  // Обрабатываем message.data
});

Детали асинхронной передачи сообщений

Для стабильной и надёжной работы вашего расширения важно понимать асинхронность обмена сообщениями. Вы должны быть готовы использовать коллбеки для обработки ответов.

Обработка ответов:

// В content script
// SendMessage аналогично отправке электронной почты
chrome.runtime.sendMessage({data: "yourData"}, function(response) {
  console.log("Получен ответ:", response);
});
// В popup script
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // Анализируем message.data
  // Отправляем ответ, обмен сообщениями двусторонний
  sendResponse({status: "Данные успешно получены, спасибо!"});
  return true; // Это обеспечивает поддержание открытого канала связи в случае продолжительной коммуникации
});

Стратегии для эффективной передачи сообщений

Local storage — ваш личный кладовой для данных

LocalStorage предоставляет разработчикам удобный механизм для сохранения данных между сессиями работы в popup окне.

// Content script
// Подсчитываем все элементы на странице
const totalElements = document.querySelectorAll('*').length;
localStorage.setItem('total_elements', totalElements);

// Popup script
// Извлекаем ранее сохранённые данные
const totalElements = localStorage.getItem('total_elements');
console.log(`Количество элементов на странице: ${totalElements}`);

Подробнее об этом расскажет наш спикер на видео

Обмен сообщениями с уникальным "type"

Используя поле "type" в вашем сообщении, вы получаете возможность идентифицировать его, как при использовании секретного рукопожатия.

Content Script:

// Отправляем сообщение с уникальным кодом, словно этот код — шифр
chrome.runtime.sendMessage({type: "DOM_COUNT", data: "yourData"});

Popup Script:

// Принимаем сообщение и на основе его "type" расшифровываем его содержание
chrome.runtime.onMessage.addListener((message) => {
  if(message.type === "DOM_COUNT") {
    // Работаем с данными сообщения message.data
  }
});

Активная вкладка — цель для ваших сообщений

Если желаете направить сообщение в определённую вкладку, используйте chrome.tabs.query для адресации сообщений из popup в content script активной вкладки.

// Ищем активную вкладку
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
  // Отправляем сообщение активной вкладке
  chrome.tabs.sendMessage(tabs[0].id, {data: "yourData"});
});

Визуализация

Можно представить работу вашего расширения для Chrome в виде многоэтажного здания:

1 этаж: content script (🔎) – сбор данных на уровне веб-страницы.
Лифт: API сообщений (🛗) – перенос данных между слоями.
10 этаж: popup.html (🎉) – представление данных пользователю.

Обратите внимание на поток данных и фиксируйте ключевые моменты:

[🔎] --(сбор данных)--> [🛗] --(отправка данных)--> [🎉]

content script — поисковик данных;
API сообщений — курьер, доставляющий данные;
popup.html — витрина, демонстрирующая данные.

Понятно и эффективно!

Осторожно! Потенциальные проблемы

Последовательность скриптов — важность этапности

В файле manifest.json порядок скриптов имеет значение. Убедитесь, что content scripts загружаются перед popup скриптами для обеспечения корректного взаимодействия.

Local storage — несмотря на удобство, требует аккуратности

Local storage доступен в современных браузерах, однако, в связи с особенностями content scripts, его работа может быть непредсказуемой. Используйте код обмена сообщениями корректно, чтобы избежать проблем.

Асинхронность обмена сообщениями — время имеет значение

Процесс обмена сообщениями не является моментальным, он асинхронен. Для корректной работы вашего кода готовьтесь к ожиданию ответов, используя коллбеки или промисы для управления асинхронностью.

Полезные материалы

1. Передача сообщений | Расширения | Chrome для разработчиков — официальное руководство по передаче сообщений.
2. Передача сообщений в расширении Chrome: ответ не отправлен – Stack Overflow — опыт сообщества и решение проблем обмена сообщениями между content scripts и popups.
3. runtime.sendMessage() – Mozilla | MDN — подробное руководство по передаче сообщений в WebExtensions.
4. Как создать расширения для Chrome – YouTube — визуализированное пошаговое обучение созданию расширений для Chrome.
5. Расширения / Начало работы | Chrome для разработчиков — стартовое руководство по созданию расширений.
6. chrome.tabs | API | Chrome для разработчиков — обзор API chrome.tabs для организации обмена сообщениями между вкладками.