基于 React TSX UI chrome API 的 chrome 扩展交互答案

【问题标题】：interaction of a chrome extension based on React TSX UI chrome API基于 React TSX UI chrome API 的 chrome 扩展交互
【发布时间】：2022-12-05 04:07:26
【问题描述】：

我正在尝试构建一些扩展，其中包含一个表单和一个使用 desktopCapture 捕获屏幕的选项，如下所示：

该表单是用 React TypeScript 编写的，用于捕获屏幕的代码（来自here）如下：

chrome.runtime.onMessage.addListener(
  (message, sender, senderResponse) => {
    if (message.name === "stream" && message.streamId) {
      let track, canvas;
      navigator.mediaDevices
        .getUserMedia({
          video: {
            mandatory: {
              chromeMediaSource: "desktop",
              chromeMediaSourceId: message.streamId,
            },
          },
        })
        .then((stream) => {
          track = stream.getVideoTracks()[0];
          const imageCapture = new ImageCapture(track);
          return imageCapture.grabFrame();
        })
        .then((bitmap) => {
          track.stop();
          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
            .toDataURL()
            .then((url) => {
              //TODO download the image from the URL
              chrome.runtime.sendMessage(
                { name: "download", url },
                (response) => {
                  if (response.success) {
                    alert("Screenshot saved");
                  } else {
                    alert("Could not save screenshot");
                  }
                  canvas.remove();
                  senderResponse({ success: true });
                }
              );
            })
            .catch((err) => {
              alert("Could not take screenshot");
              senderResponse({ success: false, message: err });
            });
        });
    }
    return true;
  }
);

我的意图是，当用户单击“截屏”时，上面的代码将运行，然后在保存时，图像将显示在该框中。

我能够“抓住”这两个元素，包括我希望在截屏后显示图像的框，以及“截屏”按钮。

据我所知，content_script 仅注入网页（浏览器），并且无法访问扩展，因此，这不是在其中添加代码的方式..

我错过了什么？我如何添加一个 eventListener，如果单击按钮，screenCapturing 代码将运行，我将能够将框设置为捕获的图像？

此致！

【问题讨论】：

标签： javascript reactjs google-chrome-extension

【解决方案1】：

我认为，你想截取选项卡页面内容的屏幕截图。（我假设你不需要抓取播放视频或音频内容）

修复 1：使用chrome.tabs.captureVisibleTab api 获取屏幕截图。 API链接 chrome.tabs

添加这个在background.js

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

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

修复 2：Content_script 具有有限的 api 访问权限。

检查此页面。 Understand content script capabilities

解决方案：从 content_script 发送消息到后台并要求他们捕获屏幕截图。后台截图

【讨论】：