I am trying to pass data from background.js to popup.js, in background file it is giving the error:

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

Code is given below:

background.js

var currentUrl = '';

chrome.tabs.query(
    {
     lastFocusedWindow: true,
     active: true
    },
    function (tabs)
    {
        console.log('Active Tab')
        currentUrl = tabs[0].url        
        chrome.runtime.sendMessage({
            msg: "From Background"
         })
        
    });

popup.js

document.addEventListener("DOMContentLoaded", function() {
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
        console.log("From popup.js")
        console.log(request.msg)
     })
}); 

Manifest

 "manifest_version": 3,
    // "icons": {
    //     "16": "/images/icon-16x16.png",
    //     "32": "/images/icon-32x32.png",
    //     "48": "/images/icon-48x48.png",
    //     "128": "/images/icon-128x128.png"
    // },
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "index.html",
        "default_title": "Agile SEO Super Cluster",
        "default_icon": {
            "16": "16x16.png",
            "32": "32x32.png"
        }
    },
    "permissions": [
        "storage",
        "activeTab",
        "scripting",
        "tabs"
    ],
    "host_permissions": [
        "https://www.google.com/*"
    ]
}