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

Question

I am trying to pass message from background to content script but it is showing error

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

I have tried too many solutions but nothing work. Here actually I am trying to create side panel in chrome extension for that I am passing message background to content script. My content script file is side-panel.js

background.js

chrome.action.onClicked.addListener((tab) => {
  chrome.tabs.sendMessage(tab.id, "toggle");
  console.log("message sent");
});

content (side-panel.js)

console.log("side-panel script loaded");

chrome.runtime.onMessage.addListener(function (msg, sender) {
  if (msg == "toggle") {
    console.log("message received");
    toggle();
  }
});

var iframe = document.createElement("iframe");
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "0px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.style.border = "0px";
iframe.src = chrome.runtime.getURL("popup.html");

document.body.appendChild(iframe);

function toggle() {
  if (iframe.style.width == "0px") {
    iframe.style.width = "400px";
  } else {
    iframe.style.width = "0px";
  }
}

manifest.json

{
    "version": "1.0",
    "manifest_version": 3,
    "name": "test",
    "key": "ahhechlhmhicciahdcegooimkdnhbphh",
    "background": {
        "service_worker": "background.js"
    },
    "action": {},
    "content_scripts": [
        {
            "matches": [
                "https://*/*",
                "http://*/*"
            ],
            "js": [
                "side-panel.js"
            ]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": [
                "popup.html"
            ],
            "matches": [
                "https://*/*",
                "http://*/*"
            ],
            "extension_ids": [
                "ahhechlhmhicciahdcegooimkdnhbphh"
            ]
        }
    ]
}