Can't communicate between popup.js and content.js,

Question

I am creating a chrome extension and i am trying to communicate between the popup.js and the content.js, but am not able to

popup.js

(async () => {
  const [tab] = await chrome.tabs.query({
    active: true,
    currentWindow: true,
  });
  const response = await chrome.tabs.sendMessage(tab.id, {
    greeting: "hello",
  });
  // do something with response here, not outside the function
  console.log(response);
})();

content.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(
    sender.tab
      ? "from a content script:" + sender.tab.url
      : "from the extension"
  );
  if (request.greeting === "hello") sendResponse({ farewell: "goodbye" });
});

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  console.log(
    sender.tab
      ? "from a content script:" + sender.tab.url
      : "from the extension"
  );
  if (request.greeting === "hello") sendResponse({ farewell: "goodbye" });
});

this is my manifest.json

{
 "manifest_version": 3,
 "name": "fontInspector",
 "version": "0.1",
 "description": "A Chrome extension to extract font information from webpages.",

 "content_scripts": [
   {
     "matches": ["<all_urls>"],
     "js": ["content.js"]
   }
 ],

 "action": {
   "default_popup": "html/popup.html",
   "default_icon": "assets/icon.png"
 },
 "background": {
   "service_worker": "background.js"
 },
 "permissions": ["storage", "scripting"]
}

when I open popup.js, I get errors saying that there is no receiving end. when i refresh the main content page, and then refresh the extension, then the error goes away and the message response is visible. what can i do to overcome this?

I am following thisdocumentation