Uncaught TypeError: Cannot read properties of undefined (reading 'capture')

Question

I am getting the above error when trying to use tabCapture API in the content-script.js

I used the required permissions in manifest.json file, the tabCapture API is working in the popup.js file, but I want to use it after the button click inside the content-script.js

Edit: - I tried using the tabCapture API in the background.js, but still getting the same error

content.js
    var recordButton = document.createElement("button");
    recordButton.innerHTML = "Record";
    
    recordButton.addEventListener("click", function() {
      // Use the chrome.tabCapture API to capture the current tab and record the screen
       chrome.tabCapture.capture({ video: true, audio: true }, function(stream) {
      
           const video = document.createElement("video");
           video.srcObject = stream;
           video.style.position = "fixed";
           video.style.bottom = "0";
           video.style.right = "0";
           video.style.zIndex = "9999";
           document.body.appendChild(video);
         
       });
      
    });
    
    // Inject the record button into the page
    document.body.appendChild(recordButton);

manifest.json
{
    "manifest_version": 3,
    "name": "Once More",
    "version": "1.0",
    "description": "Description of my extension",
    "permissions": ["scripting", "activeTab", "tabs", "tabCapture"],
    "action": {
      "default_popup": "popup.html",
      "default_title": "Click Me"
       
    },
    
      "background": {
        "service_worker": "background.js"
      },
      "host_permissions": ["<all_urls>"]
    
  }

The error looks like this :-