本文介绍了chrome扩展-sendResponse不等待异步功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我遇到了异步性问题(我相信). contentscript.js 中的sendResponse()不等待getThumbnails()返回.

I am having an issue of asynchronicity (I believe). sendResponse() in contentscript.js does not wait for getThumbnails() to return.

我正在 popup.js 中发送消息:

chrome.tabs.sendMessage(tabs[0].id, {message: "get_thumbnails", tabUrl: tabs[0].url},
      function (respThumbnails) {
            const thumbUrl = respThumbnails.payload;
            console.log("payload", thumbUrl)
      }
);

然后,在 contentscript.js 中,我收听此消息:

Then, in contentscript.js I listen for this message:

chrome.runtime.onMessage.addListener(async function(request,sender,sendResponse) {
    if(request.message === "get_thumbnails") {
        const payload = await getThumbnails();
        console.log("thumbPayload after function:", payload)
        sendResponse({payload:payload});
    }
});


async function getThumbnails() {
    let tUrl = null;
    var potentialLocations = [
        {sel: "meta[property='og:image:secure_url']",   attr: "content" },
        {sel: "meta[property='og:image']",              attr: "content" },
    ];

    for(s of potentialLocations) {
        if(tUrl) return
        const el = document.querySelector(s.sel);
        if(el) {
            tUrl = el.getAttribute(s.attr) || null;
        }
    }
    return tUrl;
};

但是问题也可能来自我的getThumnails()函数,因为在大多数情况下,有效载荷为空并且不是不确定的.因此getThumbnails()可能在完全执行之前返回.如果是这样,我不知道为什么...

But it is also possible that the problem is coming from my getThumnails() function, because most of the times, payload is null and not undefined. So getThumbnails() might return before it is completely executed.If this is the case, I have no idea why...

我也尝试了getThubnails()的这段代码:

I also tried this code for getThubnails():

async function getThumbnails() {
  let x = await function() {
    let tUrl = null;
    var potentialLocations = [
        {sel: "meta[property='og:image:secure_url']",   attr: "content" },
        {sel: "meta[property='og:image']",              attr: "content" },
    ];

    for(s of potentialLocations) {
        if(tUrl) return
        const el = document.querySelector(s.sel);
        if(el) {
            tUrl = el.getAttribute(s.attr) || null;
        }
    }
    return tUrl;
  }
  return x;
};

但这不起作用,似乎破坏了我的代码...

But this does not work, it seems to break my code...

推荐答案

onMessage的回调应该返回true 以便保持内部消息通道开放,以便sendResponse可以异步工作.

The callback of onMessage should return true in order to keep the internal messaging channel open so that sendResponse can work asynchronously.

问题是,您的回调函数用async关键字声明,这意味着它返回了Promise,因此它无法返回原义的true值,因为Chrome扩展程序API不支持Promise,因此无法解决它.

The problem is, your callback is declared with async keyword which means it returns a Promise so it can't return a literal true value because Chrome extensions API doesn't support Promise and hence can't resolve it.

使用标准函数回调和嵌套的异步IIFE:

Use a standard function callback and a nested async IIFE:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === "get_thumbnails") {
    (async () => {
      const payload = await getThumbnails();
      console.log("thumbPayload after function:", payload)
      sendResponse({payload});
    })();
    return true; // keep the messaging channel open for sendResponse
  }
});

这篇关于chrome扩展-sendResponse不等待异步功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

05-28 01:03
查看更多