Service Worker 的 URL.createObjectURL 的模拟是什么

Question

对于清单

v2

，我使用

URL.createObjectURL

以便将文件从

background

返回到

content

。如何使用清单

v3

和 Service Worker 实现这一点？我知道

XMLHttpRequest

到

fetch

。但是什么模拟

URL.createObjectURL

？

// background.js
function onContentMessage(message, sender, sendResponse) {
    if (message.action == 'requestFileGET') {
        requestFileGET(message.url, (url) => sendResponse(url));
    }
    return true;
}

function requestFileGET(url, callback) {
    let request = new XMLHttpRequest();
    request.responseType = 'blob';
    request.onreadystatechange = function () {
        if (request.readyState == 4) {
            let url = URL.createObjectURL(request.response);
            callback(url);
        }
    };
    request.open('GET', url);
    request.send();
}

// content.js
backgroundFileGET(urlCover, (cover) => {
    let url = `${HANDLER_UPLOADPIC}?kind=${kind}&sign=${sign}`;
    let formData = new FormData();
    formData.append('file', cover);
    requestFilePOST(url, formData, callback);
});

function backgroundFileGET(url, callback) {
    backgroundRequest('requestFileGET', url, (backgroungdUrl) => {
        requestFileGET(backgroungdUrl, (file) => callback(file));
    });
}

function backgroundRequest(action, url, callback) {
    chrome.runtime.sendMessage({ action: action, url: url }, (response) => callback(response));
}

Answer 1

Service Workers 由于其内部运作原因不支持

URL.createObjectURL

；托管内容。

我在here更详细地解释了功能。

利用数据 URL 来纠正您的功能：

if (request.readyState == 4) {
    let url = `data:;base64,${btoa(request.response)}`;
    callback(url);
}

另外，请注意，在 Manifest v3 中，

XMLHttpRequest

已替换为

fetch

API。

Answer 2

我的解决方案使用 ID 存储数据并打开一个新选项卡，其中包含 download.html#ID 等页面

let videoId = '#' + new Date().valueOf();
self.DownloadedVideoData[videoId] = { data: data, filename: 
filename, mimetype:mimetype, segment:segment, action:'download' };
chrome.tabs.create({ url: "video.html" + videoId, active: false });

在页面内注册一个要加载的函数和您的下载代码

chrome.runtime.sendMessage({
    action: 'GetVideoDataByID',
    VideoID: self.VideoID,
}, function (videoData) {
    if (videoData.action == 'download') self.DownloadVideo(videoData);
);

self.DownloadVideo = function (request) {
    let blob = new Blob(request.data, { type: request.mimetype }),
    downloadId;

    chrome.downloads.onChanged.addListener(function (dl) {
        if (dl.id === downloadId && dl.state && dl.state.current == 
         'complete') {
            window.close();
        }
    });

    chrome.downloads.download({
        url: URL.createObjectURL(blob),
        filename: request.filename
    }, function (id) {
        downloadId = id;
        window.close();
    });
}

现在你只需要像这样的后台工作人员中的监听器

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
     switch (request.action) {
        case 'GetVideoDataByID':
            sendResponse(self.GetVideoDataByID(request.VideoID));
            break;
        default:
            break;
     }
}