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

Question

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

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

但似乎objectURL 无法从弹出窗口访问视频！有什么解决办法吗？

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

blob:https%3A//developer.chrome.com/5363c96d-69ff-4e91-8d06-48f1648ad0e4 Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

我刚刚知道如何做到这一点。

为了在 chrome 扩展中跨脚本和选项卡传输 blob url，您必须首先发送 xmlhttp 请求以从创建于 url 的原始 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...

希望对大家有所帮助！

Answer 2

感谢@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();
    });
}

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

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

javascript

dom

popup

google-chrome-extension

screencast