如何将来自Chrome扩展背景脚本的获取数据发送到内容脚本？

发布于 2025-01-22 16:08:55 字数 728 浏览 1 评论 0原文

在我的内容脚本中触发事件后，它将发送消息请求到背景脚本并等待响应。

content.js

chrome.runtime.sendMessage({ userId: userId }, function (response) {
    console.log(response);
});

background.js：

chrome.runtime.onMessage.addListener(function (
  request,
  sender,
  sendResponse
) {
  const userId = request.userId;
  if (userId) {
    fetchData(userId).then((data) => {
      sendResponse({ response: data });
    });
    return true;
  }
});

我已经尝试了异步/等待，将“返回true”移至if语句外部，但是在我的内容脚本中，响应要么是不确定的（即使fetchdata返回正确的数据），没有响应，也没有响应，或错误“消息端口在收到响应扩展之前关闭的消息端口”。

我想要的流程是：

content.js将消息请求发送到background.js，并
背景
。
等待
响应收到响应并记录数据

原文

Once an event is triggered in my content script, it send a message request to the background script and waits for a response.

content.js

chrome.runtime.sendMessage({ userId: userId }, function (response) {
    console.log(response);
});

background.js:

chrome.runtime.onMessage.addListener(function (
  request,
  sender,
  sendResponse
) {
  const userId = request.userId;
  if (userId) {
    fetchData(userId).then((data) => {
      sendResponse({ response: data });
    });
    return true;
  }
});

I've tried async/await, moving the "return true" to outside the if statement, but in my content script the response is either undefined (even though fetchData returns the correct data), no response, or the error "the message port closed before a response was received extension".

The flow I want is: