javascript Chrome async wait sending content before request completed

m528fe3b 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(97)

下面是一个尝试从网页中提取一些信息，然后将其显示在Chrome扩展页面上。
我的问题基于许多小时的研究似乎是从网页中提取的变量发送到扩展页面失败，因为我的提取器是异步的。
在下面的最后一步之后到达我的扩展页面的变量是[object object]。
似乎sendMessage操作在将结果发送到接收端之前没有等待async-wait步骤完成。我已经尝试了许多解决堆栈溢出问题的方法，但似乎没有找到解决方案。
1.)此代码将在网页上运行以提取一些信息（原始代码中需要异步await，下面只是一个示例）。

async function Extractor(document) {
    var item = document.getElementbyId("....");
    await new Promise(r => setTimeout(r, 3000));

    return item
}

2.)我假设这段代码向下面的代码发送消息，告诉它运行并检索提取器结果。

chrome.runtime.sendMessage({
    action: "getSource",
    source: Extractor(document)
});

3.)这段代码位于 popup.js 中，我的目的是将提取器从网页中提取的结果插入到一个 popup.html 扩展页面中，位于node id =“message”下。

chrome.runtime.onMessage.addListener(function(request, sender) {
   if (request.action == "getSource") {
      message.innerText = request.source;
   }
});

JavaScript

来源：https://stackoverflow.com/questions/74072421/chrome-async-wait-sending-content-before-request-completed

1条答案

按热度按时间

vuktfyat1#

此示例在弹出窗口中显示 * document.title *。

文件 popup.js

const message = document.getElementById("message");

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  chrome.scripting.executeScript({
    target: { tabId: tabs[0].id },
    function: getDocumentTitle
  });
});

async function getDocumentTitle() {
  chrome.runtime.sendMessage({
    action: "getSource",
    source: await Extractor()
  });

  async function Extractor() {
    var item = document.title;
    await new Promise(r => setTimeout(r, 3000));

    return item;
  }
}

chrome.runtime.onMessage.addListener(function (request, sender) {
  if (request.action == "getSource") {
    message.innerText = request.source;
  }
});

文件 manifest.json

{
  "name": "getDocumentTitle",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": [
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

文件 popup.html

<!DOCTYPE html>
<html>

<body>
  <div id="message"></div>
  <script src="popup.js"></script>
</body>

</html>

赞(0）回复(0）举报 2023-03-28

我来回答

javascript Chrome async wait sending content before request completed

1条答案

文件 popup.js

文件 manifest.json

文件 popup.html

相关问题

热门标签

最新问答