Warm tip: This article is reproduced from serverfault.com, please click

javascript-Chrome扩展程序,基于异步提取的数据创建新的标签页

(javascript - Chrome extension, create a new tab based on asynchronous fetched data)

发布于 2020-11-28 08:01:37

我正在为的行为而苦苦挣扎chrome.tabs.create()

我希望达到以下目的:单击按钮后,应用程序可以获取URL,然后根据messageUrl刚才获取的URL创建一个新选项卡

先感谢你!

这是我的代码(无效)

  • 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();
      });
    }
    
Questioner
walkcc
Viewed
0
Nadia Chibrikova 2020-11-29 16:40:03

坏消息:似乎你无法等待弹出窗口中的异步调用。好消息:你可以在后台脚本中等待它们,因此可以将函数移到那里,然后从弹出窗口中调用它,如下所示

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