Question

我目前正在为Google Chrome创建一个扩展程序，可以保存所有图像或链接到硬盘上的图像。

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

你有个主意吗？

Answer 1

您可以使用HTML5 FileSystem features API使用Download写入磁盘。这是将文件下载到磁盘的唯一方法，它是有限的。

你可以看看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下载到文件中。

Answer 2

我一直希望自己批量下载图片。然而，每当我感到沮丧，因为唯一看似适用的选项是NPAPI，Chrome和firefox似乎都不想再支持了。

我建议那些仍然希望实现“在磁盘上保存文件”功能的人看看这个Stackoverflow post，这篇文章下面的评论对我有很大帮助。

现在，由于chrome 31+，chrome.downloads API变得稳定。我们可以用它以编程方式下载文件。如果用户未在chrome设置中设置ask me before every download advance选项，我们可以保存文件而不提示用户确认！

以下是我使用的内容（在扩展程序的背景页面）：

    // 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的官方文档为here。

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

Answer 3

我无法将文件静默保存到用户的驱动器，这是您希望的样子。我认为您可以使用以下内容一次一个地保存文件（每次提示用户）：

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

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

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

Answer 4

考虑使用HTML5 FileSystem features使用Javascript编写文件。

Answer 5

Google Webstore
Github

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

Answer 6

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

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

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

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

Answer 7

由于Javascript通过网页从任何地方搭便车到您的计算机，因此让它能够写入您的磁盘是危险的。

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

Chrome扩展程序：如何在磁盘上保存文件

7 个答案: