如何在清单v3扩展服务工作者中使用URL.CreateObjectUrl

Question

我的扩展名创建了带有图像的拉链档案。然后我使用chrome.downloads.download下载我的存档到设备。

const url = URL.createObjectURL(archiveBlob);

chrome.downloads.download({
  url,
  filename: `${archiveData.fileName}.zip`,
  saveAs: false
});

当我将ArrayBuffer转换为Image时，我的扩展程序中还需要URL.CreateObjectUrl

async bufferToImage(buffer: ArrayBuffer): Promise<InstanceType<typeof Image>> {
  return new Promise((res, rej) => {
    const blob = new Blob([buffer]);
    const objectURL = URL.createObjectURL(blob);
    const img = new Image();
    img.src = objectURL;
    img.onload = () => res(img);
  });
}

。

Answer 1

您可以将 blob 转换为 base64 。

如果要导出图像：

/**
 * capture and download
 * 截图并下载
 */
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {

  chrome.tabs.query({ active: true }, async (tabs) => {
    const tab = tabs[0];
    const image = await chrome.tabs.captureVisibleTab(tab.windowId, {
      format: "png",
    });

    chrome.downloads.download({
      url: image,
      filename: "1.png",
    })

  });
});

如果要导出zip：

import JSZip from "jszip";

/**
 * example: captureVisibleTab and export zip
 * 案例：截图并导出zip
 */
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  chrome.tabs.query({ active: true }, async (tabs) => {
    const tab = tabs[0];

    // capture
    const image = await chrome.tabs.captureVisibleTab(tab.windowId, {
      format: "png",
    });

    // image base64 => blob
    const blob = await fetch(image).then((response) => response.blob());

    // zip image
    const zip = new JSZip();
    zip.file("insta-snap1.png", blob, { binary: true });
    const zipData = await zip.generateAsync({
      type: "base64",
    });

    // download zip with base64
    chrome.downloads.download({
      url: `data:application/octet-stream;base64,${zipData}`,
      filename: "test.zip",
    });
  });
});

Answer 2

tl; dr：使用 data urls urls 。服务工作者没有 url.createobjectUrl 由于电位内存泄漏。

什么是 url.createobjecturl 做什么？我们为什么使用它？

这个小函数可以做一些我们可以将其与 chrome.download这样的功能以及函数以及函数一起使用的一些事情。

• 唯一的文件名
• 字符串内容（文本）
• MIME类型（选项），

因为它需要一个斑点对象，所以我们已经提供了内容（参数1）和类型 （参数2;选项）。

url.createobjecturl 的返回值不仅是任何URL。此URL是您提供的内容的结果。尝试访问这些URL，这是您的内容托管。

例如“ Hello world” =＆gt; url.createobjecturl =＆gt; blob：chrome-extension：//.../＆ult; uuid＆gt; =＆gt; 现在， “ Hello World”

，如我们的示例，当使用 chrome.downloads 时，将返回的URL值作为 url 参数，文件类型和文件名是自动分配的，当您的内容被重新下载时。

因此，如果您想复制此功能：

// creating a Zip file download prompt
// external variables: archiveData, archiveBlob
const data = btoa(archiveBlob);
const filename = `${archiveData.fileName}.zip`;
const mediatype = "application/octet-stream";
const url = `data:${mediatype};base64,${data}`;

chrome.downloads.download({
    filename,
    url,
});

// base64 binary image data and provide URL to load it
return new Promise((res, rej) => {
    const blob = btoa(buffer);
    const objectURL = `data:;base64,${blob}`;
    const img = new Image();
    img.src = objectURL;
    img.onload = () => res(img);
});

Answer 3

在Chrome扩展中不允许通过消息直接传递 BLOB 对象。

您可以将 blob 对象转换为基本64编码的字符串。这是如何进行转换的示例：

在背景脚本中，将 blob 转换为 base64String ：

const response = await fetch(iconUrl, {
    headers: {
        "Content-Type": "application/json",
    }
})
if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`)
}
const imageBlob = await response.blob();
//
const base64String = await new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () =>resolve(reader.result);
    reader.readAsDataURL(imageBlob);
});
console.log("image base64String ",base64String)

在 content 脚本，接收 base64String ，然后转换回 blob ：

// load base64String as image
if (pageIcon.startsWith('data:image/')) {
    return <img src={pageIcon} alt="Icon" className="w-4 h-4" />;
}

// If you still need blob objects, here's the reference
const binaryString = atob(base64String.split(',')[1]);
const len = binaryString.length;
const bytes = new Uint8Array(len);
for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
}
const blob = new Blob([bytes], { type: 'image/png' });