Блог

Главная - Вопросы по программированию - Расширение Chrome, создание новой вкладки на основе асинхронно извлеченных данных

Расширение Chrome, создание новой вкладки на основе асинхронно извлеченных данных

#javascript #google-chrome-extension

#javascript #google-chrome-расширение

Вопрос:

Я борюсь с поведением chrome.tabs.create() .

Вот чего я надеюсь достичь: после нажатия кнопки приложение может получить URL-адрес, а затем создать новую вкладку на основе messageUrl только что извлеченного.

Заранее спасибо!

Вот мой код (не работает)

  • popup.html 
     <!DOCTYPE html>
<html>
  <style type="text/css"></style>
  <body style="width: 200px;">
    <form>
      <button id="myButton">Open a random url</button>
      <script type="text/javascript" src="popup.js"></script>
    </form>
  </body>
</html>
  • popup.js 
     document.addEventListener('DOMContentLoaded', documentEvents, false);

// fetch a URL and return a string (which is also a URL)
async function getMessageUrl() {
  const res = await fetch('https://dog.ceo/api/breeds/image/random');
  const json = await res.json();
  return await json['message'];
}

async function openImageUrl() {
  const messageUrl = await getMessageUrl();
  chrome.tabs.create({ url: messageUrl });
}

function documentEvents() {
  document.getElementById('myButton').addEventListener('click', function () {
    openImageUrl();
  });
}

Комментарии:

1. document.getElementById(‘MyButton’) где находится MyButton?

2. Привет @NadiaChibrikova, извините, это была опечатка. Я это исправил!

Ответ №1:

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

 chrome.extension.getBackgroundPage().openImageUrl();
Метки: ,