使用 downloads.download() API 将数据 URI 保存为文件

Question

更新

我已经通过使用 Blob URL / 对象 URL (URL.createObjectURL(blob)) 解决了这个问题（感谢 @DanielHerr

），但是我仍然很好奇为什么在使用

data:

URL 时会出现此错误

---

我正在使用 WebExtensions API 创建一个适用于 Chrome 和 Firefox 的扩展。

扩展程序会随着时间的推移收集数据，我想实现一个功能将其导出为 CSV 文件。

我尝试使用

downloads.download()

下载文件，但是出现错误：

错误：downloads.download 的参数选项类型错误（处理 url 时出错：错误：URL

data:text/csv;charset=utf-8;base64,{data...}

的访问被拒绝）。

我尝试将

"<all_urls>"

添加到

permissions

中的

manifest.json

键，但这没有任何区别。

这是我正在使用的代码：

var csv = 'Hello, World!' // Real data goes here
var url = 'data:text/csv;charset=utf-8;base64,' +
           window.btoa(unescape(encodeURIComponent(csv)))

chrome.downloads.download({'url': url})

我似乎不知道如何解决这个问题，所以我非常感谢您的帮助！谢谢！

---

我的

manifest.json

看起来像这样：

{
    "manifest_version": 2,
    "name": "Name",
    "version": "1.0.0",
    "description": "Description",
    "icons": {
        "16": "/icons/icon-16.png",
        "32": "/icons/icon-32.png",
        "48": "/icons/icon-48.png",
        "64": "/icons/icon-64.png",
        "96": "/icons/icon-96.png"
    },
    "applications": {
        "gecko": {
            "id": "@name",
            "strict_min_version": "48.0"
        }
    },
    "background": {
        "scripts": ["/scripts/a.js"]
    },
    "permissions": [
        "storage",
        "tabs",
        "activeTab",
        "downloads",
        "<all_urls>"
    ]
}

a.js

包含导出为 CSV 的代码。

我把剩下的代码都删掉了，只剩下

manifest.json

、

a.js

和图标文件了，但还是报同样的错误。

Answer 1

我通过使用 Blob URL / Object-URL 而不是 Data URI 解决了这个问题：

var csv = 'foo,bar,baz'
var blob = new Blob([csv], {type: "text/csv;charset=utf-8"})

chrome.downloads.download({
    'url': URL.createObjectURL(blob),
    'filename': 'file.csv',
})

Answer 2

我尝试这样做，但捕获了浏览器的屏幕截图，但没有成功。在使用 blob 之前，我有以下代码：

function takeScreenshotAndSave() 
{
  browser.tabs.captureVisibleTab({ format: "png" })
    .then(screenshotUrl => {
      console.log("Screenshot URL:", screenshotUrl);
      const filename = `Capture-snapshot${Date.now()}-visible-1.png`;

      browser.downloads.download({
        url: screenshotUrl,
        filename: filename,
        conflictAction: "uniquify",
      });
    })
    .catch(error => {
      console.error("Error taking screenshot:", error);
    });
}

但这导致了我提到的错误：

Error taking screenshot: Error: Type error for parameter options (Error processing url: Error: Access denied for URL data:,) for downloads.download.

即使我在manifest.json文件中有权限：

 "permissions": [
    "notifications",
    "activeTab",
    "downloads",
    "<all_urls>"
  ],

如果我遵循有关创建 blob 的建议，最终会得到一个包含“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABy0AAANzCAY ...”字符串的文件，而不是真正的 .png 文件（因此无法将其作为图像）。

我被困在这里了。欢迎任何建议。