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

[Remy Oswalt]

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

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>"]

   

  } content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

  if (request.hello === "injectRecordButton") {

    // Create the record button

    var recordButton = document.createElement("button");

    recordButton.innerHTML = "Record";

   

    // Add an event listener to the record button to start recording

    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) {

        // Record the stream and save the resulting video file

        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);

  }

});

[AmpersAndTroubleshooting]

Hi Remy, 

It's possible that the error is occurring because the content script does not have access to the chrome.tabCapture API. This could be because the API is only available to privileged pages such as the background script or popup.

You could attempt to move the chrome.tabCapture code to the background script and communicate with it using message passing:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.hello === "injectRecordButton") {
    // Create the record button
    var recordButton = document.createElement("button");
    recordButton.innerHTML = "Record";
   
    // Add an event listener to the record button to start recording
    recordButton.addEventListener("click", function() {

      // Send a message to the background script to start recording
      chrome.runtime.sendMessage({ action: "startRecording" });

    });
   
    // Inject the record button into the page
    document.body.appendChild(recordButton);
  }
});

and in the background.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "startRecording") {

    // Use the chrome.tabCapture API to capture the current tab and record the screen
    chrome.tabCapture.capture({ video: true, audio: true }, function(stream) {
      // Record the stream and save the resulting video file
      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);
      // ...
    });
  }
});

Let me know if this solution is successful for you otherwise we can brainstorm another method to resolve it. 

Best,

Ampers&AI