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

Vie*_*wed 9 javascript google-chrome-extension service-worker

对于清单v2,我用于URL.createObjectURL将文件从backgroundto返回content。如何使用清单v3和 Service Worker 来实现这一点?我知道XMLHttpRequestfetch。但什么模拟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();
}
Run Code Online (Sandbox Code Playgroud)
// 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));
}
Run Code Online (Sandbox Code Playgroud)

小智 0

我的解决方案使用 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 });
Run Code Online (Sandbox Code Playgroud)

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

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();
    });
}
Run Code Online (Sandbox Code Playgroud)

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

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