消息传递 - 被例子搞糊涂了

Question

我一遍又一遍地阅读文档，但我觉得它很混乱。

我想做的是将 link 的列表发送到我的后台脚本以执行一些获取请求，然后将这些 link 的响应代码传递给 popup.js 或 content-script.js 以便我可以根据其状态 link 突出显示每个

// popup.js
chrome.runtime.sendMessage({ message: filteredLinks }, (response) => {
    console.log("HTTP CODES -->", response.message);
    })

// background.js //
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    let messReps = [];
    let rep = request.message;

    for (i = 0; i < rep.length; i++) {
      fetch(rep[i], {
        method: 'GET',
        mode: 'cors'
      })
        .then(response => messReps.push(response.status))
    }
    console.log("MESS REPS", messReps);
    sendResponse({ message: messReps })
    return true;
  });

当我登录 'messReps' 时，它显示了所有消息的响应代码，但是当我尝试通过 sendResponse() 将它们发回时，我最终得到一个空数组。

我认为 'return true;' 语句应该在函数完成之前推迟发送，所以我不确定我做错了什么。

Answer 1

fetch 在后续代码完成后异步运行，因此您的 sendMessage 在实际发出任何请求之前被调用。

使用Promise.all:

// popup
chrome.runtime.sendMessage({cmd: 'fetch', urls: filteredLinks}, res => {
  console.log('HTTP CODES -->', res);
});

// background script
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.cmd === 'fetch') {
    Promise.all(msg.urls.map(fetchUrl)).then(sendResponse);
    return true;
  }
});

async function fetchUrl(url) {
  try {
    return (await fetch(url)).status;
  } catch (err) {
    return `${err}`;
  }
}

消息传递 - 被例子搞糊涂了

Message Passing - Confused by examples

google-chrome-extension