Могу ли я получить сообщение с помощью runtime.onMessage в функции, которая выполняется только при нажатии кнопки?

Question

Я новичок в js и создаю расширение для Chrome, и я хочу взять сообщение из background.js и использовать его в popup.js после нажатия кнопки.

popup.js

window.onload=function(){
    document.getElementById("BTC").addEventListener("click", bitcoin);
}
function bitcoin(){
  console.log("Clicked!");
  chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse){
    if(msg.greeting == "BTC"){
      var prices = msg.data;
      console.log(prices);
      sendResponse({});
      }
  });
}

background.js

function coinArray(coins){
      console.log(coins);
      for (var i = 0; i < 12; i++){
            var prices = new Array();
            prices[i] = coins[i].price_usd;
      }
chrome.runtime.sendMessage({greeting: "BTC", data: prices}, function(response)  {});
}

Я ожидаю увидеть массив из 12 лучших цен на криптовалюты с Coinmarketcap.com в виде массивав моей всплывающей консоли, когда я нажимаю кнопку «BTC».Я могу console.log это в background.js без проблем.Функция coinArray вызывается, когда я загружаю данные из онлайн-API, который представляет собой запрос XMLHTTPRequest, не показанный в коде.

В настоящее время только "нажали!"проходит через другой конец, и я чувствую, что проблема может быть в том, что строка onMessage находится внутри самой функции?Не уверен, куда идти после поиска решений этой проблемы.Любая Ясность будет высоко ценится!

Answer 1

Чтобы сформулировать вашу проблему в интуитивно понятном виде: вы сначала пытаетесь заставить фоновую страницу «кричать» (всякий раз, когда запускается функция coinArray), но начинаете прислушиваться к «крику» позже, после того, как больше нет звука.

sendMessage - это активное действие, которое должно произойти, пока onMessage уже (пассивно) слушает, или оно не будет работать - оно не будет "ждать", когда вы начнете слушать.

Вам нужно изменить свою логику здесь.Сделайте всплывающее окно запрос данных с фоновой страницы с sendMessage, которую фоновая страница всегда может прослушать.Затем вы можете использовать sendResponse для доставки ответа во всплывающее окно.

1. Фон регистрирует прослушиватель onMessage, ожидающий всплывающее сообщение.
2. Пользователь открывает всплывающее окно и щелкаетUI там.
3. Всплывающие вызовы sendMessage для получения информации.
4. Фон получает запрос, получает необходимые данные (однако это работает в вашем случае) и вызывает sendResponse с данными.
5. Во всплывающем окне вызывается обратный вызов sendMessage с предоставленными данными.

Конечно, точная реализация зависит от того, как вы извлекаете данные.Вероятно, он асинхронный, поэтому не забудьте return true в прослушивателе сообщений, чтобы sendMessage() можно было вызвать позже.И вообще, прочитайте больше документов Messaging и chrome.runtime docs .