Cannot get html2canvas to load in content.js of chrome extension

Question

I'm trying to allow the user to take a screenshot of a region of the page. They do this by dragging a box.

For the life of me, I cannot get html2canvas to load. It has been a nightmare trying to get this to work. It is unclear on how to load external scripts into the content.js file of a chrome extension.

How am I supposed to get this script to load?

Content.js:

let isSelecting = false;
let selectionRect = { x: 0, y: 0, width: 0, height: 0 };
let selectionOverlay = null;

function startSelection() {
  isSelecting = true;
  selectionOverlay = document.createElement('div');
  selectionOverlay.style.position = 'fixed';
  selectionOverlay.style.border = '2px dashed #000';
  selectionOverlay.style.zIndex = '9999';
  document.body.appendChild(selectionOverlay);

  document.addEventListener('mousemove', updateSelectionRect);
  document.addEventListener('mouseup', stopSelection);
}

function updateSelectionRect(event) {
  if (!isSelecting) return;

  const startX = selectionRect.x || event.clientX;
  const startY = selectionRect.y || event.clientY;
  const endX = event.clientX;
  const endY = event.clientY;

  selectionRect.x = Math.min(startX, endX);
  selectionRect.y = Math.min(startY, endY);
  selectionRect.width = Math.abs(endX - startX);
  selectionRect.height = Math.abs(endY - startY);

  selectionOverlay.style.left = `${selectionRect.x}px`;
  selectionOverlay.style.top = `${selectionRect.y}px`;
  selectionOverlay.style.width = `${selectionRect.width}px`;
  selectionOverlay.style.height = `${selectionRect.height}px`;
}

function stopSelection() {
  isSelecting = false;
  document.removeEventListener('mousemove', updateSelectionRect);
  document.removeEventListener('mouseup', stopSelection);
  document.body.removeChild(selectionOverlay);

  // Load html2canvas library and capture the selected area
  loadHtml2Canvas()
    .then(() => {
      captureSelectedArea();
    })
    .catch((error) => {
      console.error('Error loading html2canvas:', error);
    });
}
function loadHtml2Canvas() {
  return new Promise((resolve, reject) => {
     if (window.html2canvas) {
       // html2canvas is already loaded
       resolve();
     } else {
       // Load html2canvas library from CDN
       const script = document.createElement('script');
       script.src = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.3/html2canvas.min.js'; // CDN URL
       script.onload = () => {
         console.log('html2canvas library loaded from CDN');
         resolve();
       };
       script.onerror = (error) => {
         reject(error);
       };
       document.head.appendChild(script);
     }
  });
 }

function captureSelectedArea() {
  const selectedArea = document.createElement('div');
  selectedArea.style.position = 'fixed';
  selectedArea.style.left = `${selectionRect.x}px`;
  selectedArea.style.top = `${selectionRect.y}px`;
  selectedArea.style.width = `${selectionRect.width}px`;
  selectedArea.style.height = `${selectionRect.height}px`;
  selectedArea.style.zIndex = '10000';
  document.body.appendChild(selectedArea);

  window.html2canvas(selectedArea).then(canvas => {
    document.body.removeChild(selectedArea);
    canvas.toBlob(blob => {
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'screenshot.png';
      link.click();
      URL.revokeObjectURL(url);
    }, 'image/png');
  });
}

window.addEventListener('message', function (event) {
  if (event.data.action === 'cropButtonClicked') {
    startSelection();
  }
});

Manifest.json

  {
    "manifest_version": 3,
    "name": "Page Sidebar",
    "icons": {
      "16": "/img/logo16.png",
      "48": "/img/logo48.png",
      "128": "/img/logo.png"
    },
    "version": "1.0",
    "description": "Opens a sidebar panel in the current tab",
    "permissions": ["tabs","activeTab", "scripting", "cookies", "contextMenus",  "storage", "desktopCapture", "<all_urls>"],
   
    "host_permissions": [
  
      "http://localhost:5173/*",

    ],
    "action": {
      "default_title": "Open Sidebar"
    },
    "web_accessible_resources": [
      {
        "resources": [
          "sidebar.html",
          "styles.css",
          "output.css",
          "html2canvas.min.js"
        ],
        "matches": ["<all_urls>"]
      }
    ],
      "externally_connectable": {
        "matches": [
          "http://localhost/*",
    
        ]
      },
    "background": {
      "service_worker": "background.js"
     
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": [ "content.js"],
        "css": ["styles.css"],
        "run_at": "document_idle"
      }
    ]
  }