Отправка данных из 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, его работа может быть непредсказуемой. Используйте код обмена сообщениями корректно, чтобы избежать проблем.
Асинхронность обмена сообщениями — время имеет значение
Процесс обмена сообщениями не является моментальным, он асинхронен. Для корректной работы вашего кода готовьтесь к ожиданию ответов, используя коллбеки или промисы для управления асинхронностью.
Полезные материалы
- Передача сообщений | Расширения | Chrome для разработчиков — официальное руководство по передаче сообщений.
- Передача сообщений в расширении Chrome: ответ не отправлен – Stack Overflow — опыт сообщества и решение проблем обмена сообщениями между content scripts и popups.
- runtime.sendMessage() – Mozilla | MDN — подробное руководство по передаче сообщений в WebExtensions.
- Как создать расширения для Chrome – YouTube — визуализированное пошаговое обучение созданию расширений для Chrome.
- Расширения / Начало работы | Chrome для разработчиков — стартовое руководство по созданию расширений.
- chrome.tabs | API | Chrome для разработчиков — обзор API
chrome.tabs
для организации обмена сообщениями между вкладками.