Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. from scripts/background.js

i am doing a chrome extension project with manifest v3.

I tried to follow different tutorial/similar questions asked in over the web but it didnt able to solve the error.

Currently, the background.js is able sendmessage to content.js as intented. But I still wish to solve the error. Any help will be greatly appreciated!

Error:

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

Context:

scripts/background.js

Stack Trace

scripts/background.js:0 (anonymous function)

My code:
manifest.json

{
  "manifest_version": 3,
  "name": "YT Extension",
  "description": "Youtube extension",
  "version": "1.0.0",
  "icons": {
    "16": "assert/icons/icon16.jpeg",
    "32": "assert/icons/icon32.jpeg",
    "48": "assert/icons/icon48.jpeg",
    "128": "assert/icons/icon128.jpeg"
  },
  "background": {
    "service_worker": "./scripts/background.js",
    "type": "module"
  },
  "content_scripts": [ {
    "matches":["<all_urls>"],
    "run_at": "document_end",
    "js": ["./scripts/contentScript.js"]
  } ],
  "action": {
    "default_popup": "popup.html"
  },
  "host_permissions": [
    "https://www.youtube.com/*"
  ],
  "permissions": [
    "storage",
    "tabs"
  ]
}

scripts/background.js

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    console.log("background.js running...")

    if (tab.url && tab.url.includes("youtube.com/watch")) {
      console.log("Sending message: VIDEO")
      chrome.tabs.sendMessage(tabId, {
        type: "VIDEO",
      });
    }

    else if (tab.url && tab.url.includes("youtube.com/")) {
      console.log("Sending message: MAIN")
      chrome.tabs.sendMessage(tabId, {
        type: "MAIN",
      });
    }

    else {
      console.log("Sending message: NOT SUPPORTED")
      chrome.tabs.sendMessage(tabId, {
        type: "NOT SUPPORTED",
      });
    }

  }
}
)

scripts/contentScript.js

chrome.runtime.onMessage.addListener((obj, sender, response) => {
    const { type } = obj;
    console.log("content.js running...")

    if (type === "VIDEO") {
        console.log("Received message: VIDEO")
    }
    else if (type === "MAIN") {
        console.log("Select video")
    }
    else if (type === "NOT SUPPORTED") {
        console.log("Website not supported")
    }
}
);