receiving end does not exist when sending message from background.js to content_script.js

Question

I am getting this error as the listener in the content_script.js is not able to get the message sent from my background.js where when it is sent from App.js , the listener is able to get it.

//Background.js

chrome.tabs.onActivated.addListener( () => {
  
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    console.log(tabs[0].url);
    chrome.tabs.sendMessage(
      tabs[0].id,
      {
        message: "Tab changed Detected",
      },
      (response) => {
        console.log("Response Received : ");
      }
    );
  });
});

//content_script.js

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
  if (request.reason === "Tab changed Detected") {
    console.log("Tab change detect catched here");
  }
);
     

//App.js

chrome.tabs.sendMessage(
          tabs.id,
          {
            reason: "Tab changed Detected",
            username: credentials.username,
            password: credentials.password,
            validTill: credentials.validTill,
            message: credentials.message,
          },
          (response) => {
            console.log(
              "Response received from content script :" + response.status
            );
            if (response.status === "Success") {
              setContentScriptResponseStatus(true);
            }
          }
        );