Chrome extension: How to save a file on disk
You can use HTML5 FileSystem features to write to disk using the Download API. That is the only way to download files to disk and it is limited.
You could take a look at NPAPI plugin. Another way to do what you need is simply send a request to an external website via XHR POST and then another GET request to retrieve the file back which will appear as a save file dialog.
For example, for my browser extension My Hangouts I created a utility to download a photo from HTML5 Canvas directly to disk. You can take a look at the code here capture_gallery_downloader.js the code that does that is:
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 would like the implementation of converting a URI to a Blob in 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, it will use the "download" HTML5 File API to download the blob URI into a file.
Read and write files in a folder using chrome extension
Check this answer, if you haven't already:
Chrome extension: How to save a file on disk
What are the file formats of the files you want to read though? For anything that is JSON-able, you can read/write json using JSON.stringify()
, JSON.parse()
and chrome.storage.local.get
and chrome.storage.local.set
(or, change "local" for "sync" if you want it to be synched across devices that I used is signed in on). I assume you know this, anyway though
How can a Chrome extension save many files to a user-specified directory?
You've done quite a lot of research. Indeed, regular web pages cannot write to the user's filesystem without any plugins or extensions. Also, the HTML5 Filesystem API only provides access to a virtual filesystem, as you've observed.
However, you are confusing the chrome.fileSystem
API with the HTML5 FileSystem API. Unlike the HTML FileSystem API, Chrome's fileSystem
(app) API can directly write to the user's filesystem (e.g. ~/Documents
or %USERPROFILE%\Documents
), specified by the user.
This API is only available to Chrome apps, not extensions. This is not a problem, especially since you're developing an internal tool, because you can install the app and extension, and use message passing to communicate between the extension (page action) and app (file system access) (example).
About chrome.downloads
: Since your extension is internal, you can probably force users to get on the beta/dev channel in order to use this API. The only limitation of this API is that the files will be saved in (a subdirectory of) the user-defined Downloads folder.
EDIT: The chrome.downloads
API is now avaiable in all channels, including the stable branch (since Chrome 31).
Chrome extension - just to save current page into local html file
You cannot write files to disk using HTML5 or extensions unless you go native with NPAPI. There are FileSystem APIs that you can use to store it in the Chrome file system. AFAIK, last time I used it it created some GGUID file which you cannot change.
For more information regarding this, visit the HTML5 Tutorial regarding Exploring the FileSystem APIs
Related Topics
JavaScript Getelementbyid() Not Working
How to Shuffle the Characters in a String in JavaScript
What's the Difference Between JavaScript and Jscript
JavaScript - Difference Between Array and Array-Like Object
Calling Setstate in a Loop Only Updates State 1 Time
JavaScript If Statement with Multiple Permissible Conditions
How to Perform an Http File Upload Using Express on Cloud Functions for Firebase (Multer, Busboy)
What Is Settimeout Doing When Set to 0 Milliseconds
Undefined Values in Array(Len) Initializer
How to Send an Ajax Request on a Different Port with Jquery
Garbage Collection with Node.Js
Destructuring a Default Export Object
Google Maps API - Getting Closest Points to Zipcode
Is a JavaScript Array Index a String or an Integer
Using Ajax to Read Local Files