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

Question

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

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

你有想法吗？

Answer 1

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

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

例如，对于我的浏览器扩展My Hangouts我创建了一个实用程序直接下载从HTML5画布照片到磁盘。你可以看看这里的代码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(':'); 

如果你想转换一个URI到HTML5的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下载到文件中。

Answer 2

由于Javascript搭便车连接到您的计算机的网页从任何地方，让它有能力写入到您的磁盘是危险的。

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

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对象，指向该对象的链接，然后单击想象的链接。

Answer 6

我一直希望为自己制作一个扩展程序来批量下载图像。然而，每次我都感到沮丧，因为唯一看似适用的选择是NPAPI，而铬和Firefox似乎都不再需要支持。

我建议那些仍然希望实现'保存文件磁盘'功能的人看看这个Stackoverflow post，这篇文章下面的评论帮了我很多。

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

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

// 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可惜。当下载begin成功（没有完成）chrome.downloads.download的回调函数被调用

官方文档大约chrome.downloads是here。

这不是我最初的想法，但我在这里张贴希望它可能对某人有用。