Расширения для браузеров — Отправка сообщений

В этой статье мы рассмотрим, как работает отправка сообщений.
Часто бывает необходимо отправить некоторые данные из вашего сценария всплывающего окна в фоновый рабочий, где рабочий что-то скажет с этими данными и вернет их обратно.

Давайте посмотрим, как это работает.
Если вы хотите проследить за этим, возьмите следующую ветку GitHub в качестве отправной точки.

Обмен сообщениями внутри расширений браузера

В этой статье мы хотим отправить сообщение из нашего сценария всплывающего окна в фоновый рабочий.

Затем фоновый рабочий обработает и вернет что-то на основе запроса.

Сначала мы хотим изменить наш файл src/App.jsx, чтобы включить в него новую кнопку для отправки сообщения.

<button onClick={backgroundRequest}>Background request</button>
Вход в полноэкранный режим Выйти из полноэкранного режима

Здесь мы также можем добавить состояние, которое будет отслеживать сообщение, полученное в ответ от фонового рабочего.

const [message, setMessage] = useState(null);
Вход в полноэкранный режим Выход из полноэкранного режима

А затем добавьте часть рендеринга для этого текста:

{
  message && (
    <>
      <p className='text-white'>{message}</p>
      <br />
    </>
  );
}
Войти в полноэкранный режим Выход из полноэкранного режима

Теперь мы можем перейти к добавлению этой функции.

const backgroundRequest = () => {
  chrome.runtime.sendMessage({ color }, (response) => {
    setMessage(response.msg);
  });
};
Войти в полноэкранный режим Выйти из полноэкранного режима

Достаточно просто, верно? Мы вызываем среду выполнения chrome и вызываем функцию sendMessage.
В качестве параметра мы передаем текущий выбранный цвет и в ответ устанавливаем сообщение.

Для следующего шага нам нужно перейти к нашему скрипту background.js и создать принимающую сторону для этих сообщений.

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (!request.color) {
    sendResponse({ msg: `You didn't set any color` });
  }

  sendResponse({ msg: `You must really like the color ${request.color}` });
});
Вход в полноэкранный режим Выход из полноэкранного режима

Здесь мы добавляем слушателя к обратному вызову onMessage. Сначала мы хотим убедиться, что в запросе указан цвет. Если нет, мы отвечаем, что пользователь не выбрал цвет.

Если цвет был указан, мы отправляем наш фактический ответ.

Вот и все. Теперь мы можем передавать данные от нашего сценария всплывающего окна к нашему фоновому работнику.

Если вы хотите увидеть готовый код, посмотрите следующую репозицию на GitHub.

Спасибо, что прочитали, и давайте подключаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.

Оцените статью
devanswers.ru
Добавить комментарий