ScreenshotTest

background.js

// https://www.reddit.com/r/learnjavascript/comments/yeodfh/chrome_extension_error_extensionsjs2897_uncaught/
// Use a Port for multiple messages
chrome.runtime.onConnect.addListener((port) => {
  console.log(port);
  port.onMessage.addListener(async (message) => {
    if (message.name === 'stream' && message.streamId) {
      console.log(message.streamId);
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: {
            mandatory: {
              chromeMediaSource: 'screen',
              chromeMediaSourceId: message.streamId,
            },
          },
        });
        console.log(stream);
        // Avoid capturing Chrome's screen capture picker UI
        await new Promise((resolve) => setTimeout(resolve, 70));
        const [track] = stream.getVideoTracks();
        const imageCapture = new ImageCapture(track);
        const bitmap = await imageCapture.grabFrame();
        track.stop();
        port.postMessage({
          success: true,
        });
        const ctx = document
          .createElement('canvas')
          .getContext('bitmaprenderer');
        ctx.transferFromImageBitmap(bitmap);
        const reader = new FileReader();
        const blob = await new Promise((resolve) => ctx.canvas.toBlob(resolve));
        // Open screenshot in new window using Blob URL
        window.open(URL.createObjectURL(blob));
        reader.onload = (e) => {
          port.postMessage({
            done: true,
            // Pass data URL (string), ImageBitmap isn't a string
            value: e.target.result,
          });
        };
        reader.readAsDataURL(blob);
      } catch (err) {
        alert('Could not take screenshot');
        port.postMessage({
          success: false,
          message: err.message,
        });
      }
    }
  });
});

contentscript.js

chrome.action.onClicked.addListener(async (tab) => {
  chrome.desktopCapture.chooseDesktopMedia(
    ['screen'],
    tab,
    async (streamId) => {
      if (streamId && streamId.length) {
        const [{ id }] = await chrome.tabs.query({
          active: true,
          currentWindow: true,
        });
        // Use a Port for multiple messages
        const port = chrome.tabs.connect(id, { name: 'screenshot' });
        port.onMessage.addListener(async (message) => {
          console.log(message);
          if (message.done) {
            // Disconnect Port when done
            port.disconnect();
          }
        });
        port.postMessage({
          name: 'stream',
          streamId,
        });
      }
    }
  );
});
chrome.runtime.onConnect.addListener((port) => {
  console.log(port);
  port.onMessage.addListener(async (message) => {
    if (message.name === 'stream' && message.streamId) {
      console.log(message.streamId);
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: {
            mandatory: {
              chromeMediaSource: 'screen',
              chromeMediaSourceId: message.streamId,
            },
          },
        });
        console.log(stream);
        // Avoid capturing Chrome's screen capture picker UI
        await new Promise((resolve) => setTimeout(resolve, 70));
        const [track] = stream.getVideoTracks();
        const imageCapture = new ImageCapture(track);
        const bitmap = await imageCapture.grabFrame();
        track.stop();
        port.postMessage({
          done: false,
          success: true,
        });
        const ctx = document
          .createElement('canvas')
          .getContext('bitmaprenderer');
        ctx.transferFromImageBitmap(bitmap);
        const reader = new FileReader();
        const blob = await new Promise((resolve) => ctx.canvas.toBlob(resolve));
        // Open screenshot in new window using Blob URL
        window.open(URL.createObjectURL(blob));
        reader.onload = (e) => {
          port.postMessage({
            done: true,
            // Pass data URL (string), ImageBitmap isn't a string
            value: e.target.result,
          });
        };
        reader.readAsDataURL(blob);
      } catch (err) {
        alert('Could not take screenshot');
        port.postMessage({
          success: false,
          message: err.message,
        });
      }
    }
  });
});

manifest.json

{
  "name": "ScreenshotTest",
  "version": "1.0",
  "description": "blah blah",
  "manifest_version": 3,
  "background": {
  "service_worker": "background.js"
  },
  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["contentscript.js"],
    "run_at": "document_start"
  }],
  "host_permissions": [
    "http://*/*",
    "https://*/*"
  ],
  "permissions": [
    "activeTab",
    "desktopCapture",
    "tabs",
    "downloads"
  ],
  "action": {
    "default_title": "Take a Screenshot"
  }
}