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

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

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

你有个主意吗？

您可以使用HTML5 FileSystem功能使用Download 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文件API将blob URI下载到文件中.

我一直希望自己制作镀铬扩展程序来批量下载图像.然而,每当我感到沮丧,因为唯一看似适用的选项是NPAPI,Chrome和firefox似乎都不想再支持了.

我建议那些仍然希望实现"存储磁盘文件"功能的人看看这篇Stackoverflow帖子,这篇文章下面的评论对我有很大帮助.

现在自Chrome 31+以来,chrome.downloadsAPI变得稳定.我们可以用它以编程方式下载文件.如果用户没有ask me before every download在chrome设置中设置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是在这里.

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

我不知道如何将文件默默地保存到用户的驱动器中,这就像您希望的那样.我认为您可以使用以下内容一次一个地保存文件(每次提示用户)

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

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

浏览器中有本地存储选项,但据我所知,它们仅供开发人员在沙盒中使用.(例如,Gmail的离线缓存.)请参阅从谷歌最近宣布像这一个.