popup.js can`t receive messages from background based on the action passed Chrome extension

Question

I'm building a chrome extension that gets an auth_token from another url and stores it in chrome storage which works fine. The availability of this token is supposed to trigger a change in display of button A to button B. However, when i send a response from the background of send the token to the popup.js, i'm getting this error:

"Objecterror: "Unknown action".

Below is the neccessary part :

 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 });
}
}
});

This is the popup.js part:

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

 const getToken = () => {
 try {
   const response = chrome.runtime.sendMessage({ action: "getToken" });
   console.log("Retrieved response:", response);

   if (response.token) {
    // Update UI based on retrieved token
    console.log("Retrieved token:", response?.token);
    startExportButton.style.display = "block";
    signInBtn.style.display = "none";
  } else {
    // Handle case where no token is retrieved
    console.log("No token found.");
  }
} catch (error) {
  console.error("Error retrieving token:", error);
  // Handle error here (e.g., display an error message to the user)
  }
};

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


});