在Chrome扩展程序中，是否可以截屏并在弹出窗口中显示屏幕

In Chrome extensions, is it possible to screencapture and display the screen on the popup window?

本文关键字：屏幕 窗口 显示 显示屏 扩展 Chrome 程序 是否      更新时间：2023-09-26

我正在尝试构建一个chrome扩展程序，该扩展程序可以使用chrome.desktopCapture.chooseDesktopMedia记录当前选项卡并将录制内容流式传输到default_popup文件。

目前，我正在内容脚本中获取流的对象 url，将其传递给后台脚本以进行一些检查，然后将其再次传递给弹出窗口.js这是我弹出窗口的 javascript 文件。 在页面的 DOM 上播放时，流可以工作并显示为视频，对象传递也没有问题。

但似乎对象URL无法从弹出窗口访问视频！ 有什么办法解决这个问题吗？

这是我在检查弹出窗口的控制台时遇到的错误：

blob：https%3A//developer.chrome.com/5363c96d-69ff-4e91-8d06-48f1648ad0e4 加载资源失败：服务器响应状态为 404（未找到）

我刚刚发现了如何做到这一点。

若要在 Chrome 扩展程序中跨脚本和标签页传输 Blob 网址，必须先发送 XMLHTTP 请求，以从在其他脚本上创建的原始 Blob 网址中获取 Blob。 ，然后在当前页上从该 Blob 重新创建 Blob URL。

例如

//originalURL is the bloburl from your content script
//in your popup script, call this
var request=new XMLHttpRequest();
request.open('GET', originalURL);
request.responseType='blob';
request.send();
request.onload=function(){
var newURL=URL.createObjectURL(request.response);
}
//newURL is the bloburl which can not be used on your popup script, you can set it as the soure of a video etc...

我希望这对某人有所帮助！

感谢您@jasonY提供有效的解决方案。就我而言，我需要将 ObjectURL 从后台脚本发送到内容脚本。

async function reissueObjectURL (url) {
    return new Promise((resolve, reject) => {
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.responseType = 'blob';
        request.onload = () => {
            resolve(URL.createObjectURL(request.response));
            URL.revokeObjectURL(url);
        };
        request.send();
    });
}
相关文章：