Chrome扩展：popup.js无法接收background消息，报“Unknown action”错误

错误原因 #

1. popup.js异步调用处理失误：chrome.runtime.sendMessage是异步方法，返回的是Promise对象，但你直接同步获取response，导致拿到的并非实际响应数据，后续判断response.token逻辑失效，同时引发消息处理异常。
2. background.js消息通道未维持开放：监听器使用了async函数，内部存在await异步操作，但未返回true，Chrome会在同步执行阶段结束后关闭消息通道，导致sendResponse无法正常传递响应，最终触发"Unknown action"错误。

修复代码 #

background.js 修复 #

chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
  if (message.action == "getToken") {
    try {
      const response = await chrome.storage.local.get("authToken");
      const storedToken = response.authToken;
      console.log(storedToken);
      console.log("String", JSON.stringify(storedToken));

      sendResponse({ action: "getToken", token: storedToken });
      console.log("executed successfully");
    } catch (error) {
      console.error("Error retrieving token:", error);
      sendResponse({ action: "getToken", error: error.message });
    }
    // 返回true告知Chrome保持消息通道开放，等待异步操作完成后调用sendResponse
    return true;
  }
});

popup.js 修复 #

document.addEventListener("DOMContentLoaded", async function () {
  const signInBtn = document.getElementById("signInButton");
  const startExportButton = document.getElementById("startExportButton");

  // 将getToken改为async函数，用await处理异步消息
  const getToken = async () => {
    try {
      const response = await chrome.runtime.sendMessage({ action: "getToken" });
      console.log("Retrieved response:", response);

      if (response.token) {
        console.log("Retrieved token:", response?.token);
        startExportButton.style.display = "block";
        signInBtn.style.display = "none";
      } else {
        console.log("No token found.");
      }
    } catch (error) {
      console.error("Error retrieving token:", error);
      // 这里可以添加用户可见的错误提示逻辑
    }
  };

  await getToken();
  signInBtn.addEventListener("click", openSignInPage);
});

额外提示 #

• 确认openSignInPage函数已正确定义，避免点击登录按钮时出现报错。
• 可通过Chrome扩展开发者工具的Console查看日志，进一步排查潜在问题。

内容的提问来源于stack exchange，提问作者user23424