Currently migrating from v2 to v3, and after alot of searching stack and google docs i cannot seem to get past an issue with using chrome.runtime.sendMessage from our webpage to communicate the contentScript.js

Constantly getting this respone from the webpage
Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

This error happens after the first attempt at sending the message, and constantly keeps showing in the console

Manifest

  {
      "name": "Printer Utililty",
      "description": "Utililty",
      "version": 5,
      "manifest_version": 3,
      "icons": {
        "48": "icons/icon_48.png",
        "128": "icons/icon_128.png"
      },
      "action": {
        "default_title": "Printer Extension",
        "default_popup": "popup/popup.html"
      },
      "permissions": ["activeTab", "storage", "offscreen", "tabs", "nativeMessaging", "scripting"],
      "host_permissions":["*://*.devSite.com/*"],
      "background": {
        "service_worker": "background.js"
      },
      "content_scripts": [
        {
          "js": ["contentScript.js"],
          "matches": ["*://*/*"]
        }
      ],
      "web_accessible_resources": [
        {
          "resources": ["popup/popup.js", "popup/popup.html","contentScript.js", "background.js"],
          "matches": ["*://*/*"]
        }
      ],
      "externally_connectable": {
        "ids": ["lahnkkonafcepfnlcdjambbbeaocjdbk"],
        "accepts_tls_channel_id": false,
        "matches": ["*://*.devSite.com/*"]
      }
    }

contentScript.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if(request.message === 'print') {
    console.log('lets print')
  }
})

test.php

<script>
    chrome.runtime.sendMessage(CHROME_EXTENSION_ID,
        { message: "print" },
        (response) => {
            console.log("Response from extension:", response);
        }
    );
</script>