Error When Migrating Manifest V2 to Manifest V3 message: "Could not establish connection. Receiving end does not exist."

Error when Migrating Manifest V2 to Manifest V3 with the error message: Could not establish connection. Receiving end does not exist. It occurred between sendMessage and onMessage

1. manifest.js

{
  "update_url": "https://clients2.google.com/service/update2/crx",
  "manifest_version": 3,
  "name": "AAANAME2.7",
  "version": "2.7",
  "description": "AAA NAME",
  "action": {
    "default_icon": "logo_19.png",
    "default_popup": "popup.html"
  },
  "default_locale": "ko",
  "icons": {
    "16": "logo_16.png",
    "19": "logo_19.png",
    "48": "logo_48.png",
    "128": "logo_128.png"
  },
  "background": {
    "service_worker": "bg.js"
  },
  "options_page": "options.html",
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  },
  "content_scripts": [
    {
      "all_frames": false,
      "css": [
        "achecker.css"
      ],
      "js": [
        "lib/rainbowColor.js",
        "lib/colorInspector.js",
        "lib/KWAX.js",
        "i18n.js",
        "lib/jquery-3.6.0.min.js"
      ],
      "matches": [
        "http://*/*",
        "https://*/*"
      ]
    }
  ],
  "permissions": [
    "activeTab",
    "tabs",
    "contextMenus", // extension right click popup menu
    "downloads",
    "storage",
    "tts"
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "images/*.png",
        "popup-attach-tagname.html",
        "achecker.css"
      ],
      "matches": [
        "http://*/*",
        "https://*/*"
      ]
    }
  ]
}

2. content.js

const captureRequest = new Promise(function(resolve, reject) {
    console.log("appId=" + appId);
    chrome.runtime.sendMessage(appId, {
        capture: "yes"
    }, function(response) {
        console.log('return from bg...')

        if (!chrome.runtime.lastError) {
            if (!response) {
                console.log('Fail Capture')
                reject(new Error('Fail Capture'));
            } else {
                console.log('succ Capture')
                resolve(response)
            }

        } else {
            console.log(chrome.runtime.lastError)
            // returned : Could not establish connection. Receiving end does not exist."
        }
    });
});

3. bg.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.capture == "yes") {
        chrome.tabs.captureVisibleTab(
            null, {
                format: "png",
                quality: 100
            },
            function(dataUrl) {
                sendResponse({
                    src: dataUrl
                });
            }
        );
        return true;
    } else if (request.ignoreCommon) {
        // some else 
    }
});