javascript - Chrome 扩展 : How to save a file on disk

Question

我目前正在为 google chrome 创建一个扩展程序，它可以将所有图像或图像链接保存在硬盘上。

问题是我不知道如何使用 JS 或 Google Chrome Extension API 将文件保存在磁盘上。

你有想法吗？

Answer 1

您可以使用 HTML5 FileSystem features使用 Download 写入磁盘应用程序接口(interface)。这是将文件下载到磁盘的唯一方法，而且是有限的。

你可以看看 NPAPI 插件。另一种方法是通过 XHR POST 向外部网站发送请求，然后发送另一个 GET 请求以检索文件，这将显示为保存文件对话框。

例如，对于我的浏览器扩展 My Hangouts我创建了一个实用程序来将照片从 HTML5 Canvas 直接下载到磁盘。您可以在这里查看代码 capture_gallery_downloader.js这样做的代码是:

var url = window.webkitURL || window.URL || window.mozURL || window.msURL;
var a = document.createElement('a');
a.download = 'MyHangouts-MomentCapture.jpg';
a.href = url.createObjectURL(dataURIToBlob(data.active, 'jpg'));
a.textContent = 'Click here to download!';
a.dataset.downloadurl = ['jpg', a.download, a.href].join(':');

如果您想在 HTML5 中实现将 URI 转换为 Blob，我是这样做的:

/**
 * Converts the Data Image URI to a Blob.
 *
 * @param {string} dataURI base64 data image URI.
 * @param {string} mimetype the image mimetype.
 */
var dataURIToBlob = function(dataURI, mimetype) {
  var BASE64_MARKER = ';base64,';
  var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
  var base64 = dataURI.substring(base64Index);
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var uInt8Array = new Uint8Array(rawLength);

  for (var i = 0; i < rawLength; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }

  var bb = new this.BlobBuilder();
  bb.append(uInt8Array.buffer);
  return bb.getBlob(mimetype);
};

然后在用户点击下载按钮后，它将使用“下载”HTML5 文件 API 将 blob URI 下载到文件中。