Chrome extension: how to save a file to disk

Question

I am currently creating an extension for google chrome that can save all images or image links to the hard drive.

The problem is that I don’t know how to save the file to disk using JS or with the Google Chrome extension API.

Do you have an idea?

Answer 1

Using the Download API. This is the only way to download files to disk, and it is limited.

You can watch the NPAPI plugin. Another way to do what you need is to simply send a request to an external website using XHR POST, and then another GET request to retrieve the file back, which will appear as a file save dialog.

For example, to expand my browser, My Hangouts, I created a utility to download photos from an HTML5 canvas directly to disk. You can see here the capture_gallery_downloader.js code that does this:

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(':'); 

If you want the implementation of converting a URI to Blob to HTML5, here is how I did it:

 /** * 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); }; 

Then, after the user clicks on the download button, he will use the HTML5 file loading API to load the blob URI into the file.

Answer 2

I have long wanted to make a chrome extension for myself in order to package upload images. But every time I was upset, because the only applicable option is NPAPI, which both chrome and firefox seem to no longer want to support.

I suggest for those who still want to implement the "save-file-on-disk" functionality in order to view this https://stackoverflow.com/a/167958/ , the comment below this post will help me a lot.

Now that chrome is 31+, the chrome.downloads API has become stable. We can use it to programmatically download a file. If the user has not set the ask me before every download advance option in chrome, we can save the file without asking for user confirmation!

Here is what I use (on an extra background page):

  // 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); }); 

Although it is a pity that chrome still does not provide Event when the download is completed. chrome.downloads.download callback function is called when the begin load is successful (not completed)

The official documentation for chrome.downloads here .

This is not my original idea of ​​a solution, but I wrote here, hoping this could help someone.

Answer 3

I do not know how to save files to the user's disk, as you hope. I think you can ask to save the files one at a time (each time asking the user) using something like:

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

If you want to ask the user only once, you can silently capture all the images, archive them in a package, and then ask the user to download this. This may mean doing an XmlHttpRequest for all files, archiving them in Javascript, loading them into an intermediate area, and then asking the user if they want to download the ZIP file. It sounds absurd, I know.

The browser has local storage options, but as far as I know, they are intended only for developers in the sandbox. (for example, offline Gmail caching.) See recent ads from Google, like this one .

Answer 4

Consider using the HTML5 FileSystem features that make writing to files using Javascript possible.

Answer 5

Google webstore
Github

I made an extension that does something like this if someone here is still interested. It uses XMLHTTPRequest to capture an object, which in this case is considered an image, then creates an ObjectURL, a link to this ObjectUrl, and clicks on an imaginary link.

Answer 6

You can use the Chrome extension download API, see https://developer.chrome.com/extensions/downloads

Answer 7

Since Javascript allows you to shop on a computer with web pages anywhere, it would be dangerous to give it the ability to write to your disk.

This is not allowed. Do you think the Chrome extension will require user interaction? Otherwise, it may fall into the same category.