Chrome扩展，根据异步获取的数据创建一个新标签

Question

我正在与 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();
  });
}

Answer 1

坏消息：您似乎无法等待弹出窗口中的异步调用。好消息：你可以在后台脚本中等待它们，这样你就可以把你的函数移到那里，然后像这样从弹出窗口中调用它

chrome.extension.getBackgroundPage().openImageUrl();

Chrome扩展，根据异步获取的数据创建一个新标签

Chrome extension, create a new tab based on asynchronous fetched data

javascript

google-chrome-extension