问“未检查的runtime.lastError:无法建立连接。接收端不存在”当从popup.js发送消息到content.js时

EN

document.addEventListener("DOMContentLoaded", async () => 
{
  var activate_switch = document.querySelector("input[id=activate]");

   activate_switch.addEventListener('change', function()
   {
              if(this.checked) 
              {
                  console.log("activated");
                  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) 
                  {
                      if(tabs.length == 0)
                      { 
                          console.log("could not send mesage to current tab");
                      }
                      else
                      {
                      chrome.tabs.sendMessage(tabs[0].id, {message:"run"}, function(response)
                      {
                          console.log("Hello");
                      });
                      };  
                });
     }

          });
});

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if( request.message === "run" ) {
            console.log("made it");
        }
    }
);

{
"name": "First Chrome Extension",
"description": "Build an Extension!",
"version": "0.01",
"externally_connectable": {
    "ids": [
        "*"
    ]
},
"permissions": [
    "tabs",
    "background",
    "activeTab"
],
"action": {
    "default_title": "Scraper",
    "default_popup": "popup.html"
},
"content_scripts": [
    {
        "matches": [
            "<all_urls>"
        ],
        "js": [
            "contentScript.js"
        ],
        "run_at": "document_end"
    }
],
"manifest_version": 3

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.