87

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

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

你有想法吗？

4

7 回答 7

43

您可以使用HTML5 文件系统功能通过下载API写入磁盘。这是将文件下载到磁盘的唯一方法，并且是有限的。

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

例如，对于我的浏览器扩展“我的环聊”，我创建了一个实用程序，可以将一张照片从 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 File API 将 blob URI 下载到文件中。

于 2010-01-28T21:24:32.330 回答
31

我一直希望为自己制作一个 chrome 扩展来批量下载图像。然而，每次我感到沮丧，因为唯一看似适用的选项是 NPAPI，chrome 和 firefox 似乎都不想再支持它了。

我建议那些仍然想实现'save-file-on-disk'功能的人看看这篇Stackoverflow 帖子，这篇文章下面的评论对我有很大帮助。

现在从 chrome 31+ 开始，chrome.downloadsAPI 变得稳定了。我们可以使用它以编程方式下载文件。如果用户没有ask me before every download在chrome设置中设置高级选项，我们可以保存文件而不提示用户确认！

这是我使用的（在扩展的背景页面）：

    // remember to add "permissions": ["downloads"] to manifest.json
    // this snippet is inside a onMessage() listener function
    var imgurl = "https://www.google.com.hk/images/srpr/logo11w.png";
    chrome.downloads.download({url:imgurl},function(downloadId){
        console.log("download begin, the downId is:" + downloadId);
    });

虽然很遗憾chrome仍然没有提供Event下载完成的时间。chrome.downloads.download的回调函数在下载begin成功时调用（未完成）

关于官方文档chrome.downloads在这里。

这不是我对解决方案的最初想法，但我在这里发布希望它可能对某人有用。

于 2014-03-01T10:50:13.680 回答
5

我知道没有办法将文件静默保存到用户的驱动器，这似乎是您希望做的。我认为您可以使用以下方式要求一次保存一个文件（每次都提示用户）：

function saveAsMe (filename)
{
document.execCommand('SaveAs',null,filename)
}

如果您只想提示用户一次，您可以静默抓取所有图像，将它们压缩成一个包，然后让用户下载。这可能意味着对所有文件执行 XmlHttpRequest，用 Javascript 压缩它们，将它们上传到暂存区域，然后询问用户是否要下载 zip 文件。听起来很荒谬，我知道。

浏览器中有本地存储选项，但据我所知，它们仅供开发人员在沙箱内使用。（例如，Gmail 离线缓存。）请参阅 Google 近期发布的类似此公告。

于 2010-01-28T18:41:31.220 回答
4

考虑使用HTML5 FileSystem 功能，使使用 Javascript 写入文件成为可能。

于 2011-08-14T08:01:10.393 回答
4

谷歌网上商店
Github

如果这里有人仍然感兴趣，我做了一个类似这样的扩展。它使用 XMLHTTPRequest 来获取对象，在这种情况下，该对象被假定为图像，然后为它创建一个 ObjectURL，一个指向该 ObjectUrl 的链接，然后单击虚构的链接。

于 2012-08-10T04:14:57.813 回答
2

看起来从浏览器读取和写入文件已经成为可能。一些较新的基于 Chromium 的浏览器可以使用“本机文件系统 API”。这篇 2020 年的博客文章展示了使用 JavaScript 读取和写入本地文件系统的代码示例。

https://blog.merzlabs.com/posts/native-file-system/

此链接显示哪些浏览器支持本机文件系统 API。

https://caniuse.com/native-filesystem-api

于 2021-03-04T06:58:54.947 回答
-5

由于 Javascript 会从几乎任何地方通过网页搭便车到您的计算机，因此赋予它写入磁盘的能力是很危险的。

这不被允许。您是否认为 Chrome 扩展程序需要用户交互？否则它可能属于同一类别。

于 2010-01-28T11:09:53.723 回答