interaction of a chrome extension based on React TSX UI chrome API

interaction of a chrome extension based on React TSX UI chrome API

Problem Description:

I’m attempting to build some extension which contains a form and an option to capture screen with desktopCapture, which looks like this:

enter image description here

The form is written in React TypeScript and the code for capturing the screen (taken from here) is the following:

  (message, sender, senderResponse) => {
    if ( === "stream" && message.streamId) {
      let track, canvas;
          video: {
            mandatory: {
              chromeMediaSource: "desktop",
              chromeMediaSourceId: message.streamId,
        .then((stream) => {
          track = stream.getVideoTracks()[0];
          const imageCapture = new ImageCapture(track);
          return imageCapture.grabFrame();
        .then((bitmap) => {
          canvas = document.createElement("canvas");
          canvas.width = bitmap.width;
          canvas.height = bitmap.height;
          let context = canvas.getContext("2d");
          context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
          return canvas
            .then((url) => {
              //TODO download the image from the URL
                { name: "download", url },
                (response) => {
                  if (response.success) {
                    alert("Screenshot saved");
                  } else {
                    alert("Could not save screenshot");
                  senderResponse({ success: true });
            .catch((err) => {
              alert("Could not take screenshot");
              senderResponse({ success: false, message: err });
    return true;

My intention is that when the user will click on "take screen shot", the code above will run, and then, on save, the image will be presented in that box.

I was able to ‘grab’ the two elements, both the box where I wish the image to appear after screenshooting, and the "TAKE SCREEN SHOT" button.

as far as I’m aware of, content_script only injects into web-pages (browser), and has no access to extension, therefor, that’s not the way to add the code inside..

What am I missing? How could I add an eventListener, that if the button is clicked, the screenCapturing code will run, and I’ll be able to set the box to be the captured image?

Best regards!

Solution – 1

As i understand,
you want to take screenshot of tab’s page content.
(I assume you don’t need to grab playing video or audio content)

Fix 1:
Use chrome.tabs.captureVisibleTab api for capture screenshot.
API link

Add this in background.js

const takeShot = async (windowId) => {
try {
    let imgUrl64 = await chrome.tabs.captureVisibleTab(windowId, { format: "jpeg", quality: 80 });
    chrome.runtime.sendMessage({ msg: "update_screenshot",imgUrl64:imgUrl64});
} catch (error) {

chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
    if(req.msg === "take_screenshot") takeShot(

Fix 2:
Content_script has limited api access.

Check this page. Understand content script capabilities

Send message from content_script to background and ask them to capture screenshot.
Background capture screenshot


chrome.runtime.sendMessage({ msg: "take_screenshot"});


chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
        if(req.msg === "update_screenshot") console.log(req.imgUrl64)
Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.