Chrome extension error "runtime.lastError: The message port closed before a response was received. "

Question

I am buidng a chrome app to click a element after pageloaded :

manifest.json:

{
    "manifest_version": 2,
    "name": "click chapter-btn",
    "version": "1.0",
    "browser_action":{  },
    "background": {
      "scripts": ["background.js"]
    },
    "permissions": [
      "tabs",
      "storage",
      "https://www.youtube.com/*"
    ],
    "content_scripts": [
        {
          "matches": ["https://www.youtube.com/*"],
          "all_frames": true,
          "js": ["contentScript.js"]
        }
      ]
  }

contentscript.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(document.readyState !== 'complete') {
      window.addEventListener('load',afterWindowLoaded);
  } else {
      afterWindowLoaded();
  }
  function afterWindowLoaded(){
    setTimeout(()=>{
      var btn = document.querySelector('.ytp-chapter-title-prefix')    
      btn?.click()  
     },3000)
  }
  return true
});

background.js:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
    if(changeInfo && changeInfo.status == "complete"){
        if(!tab.url.includes('https://www.youtube.com/watch')){
            return
        }
        chrome.tabs.sendMessage(tabId, {data: tab}, function(response) {});
    }
});

I searched some solutions in internet, 'add "return true" to chrome.runtime.onmessage listener',but still show this error, Dont know what to do.