2

I currently developed an extension which users can customize through option page, I use localStorage to save data.Now I want to make such a feature that user can export their customized data,so he can share with others,users can also import others' exported data.

That is to say,I want both import and export function.

After googling the stackoverflow,extension apis, I found chrome extension can't use fileSystem api to read/write files, for it can only be used in app,so I can only seek help from html5 filesystem api

Using html5 filesystme api,I can actually open a file, and read it. but speaking of writing a file,html5 can only write files in sandbox, which is definitely not what i want.

Then I found chrome extension api download. In download method,it required a param, that is to say url, which is to be downloaded.

so my question is:

  1. Is there any possible to download localstoage data through this method, or
  2. Is there any other wayto save users' customized data?
1
  • Please note: there is an old question on the topic, stackoverflow.com/questions/4003352/… It is severely outdated, but if this question is answered in needs to be updated too.
    – Xan
    Jan 13, 2015 at 11:02

1 Answer 1

1

Solutions in referenced by Xan discussion is a little bit outdated. Some time ago I did the same thing in my extension. It was in GWT framework so now I quickly wrote JS version (see code below).

The flow is as follows:

  • generate file content as a callback for user action (_getFileContents)
  • use Blob constructor to create a file (_createDownloadData)
  • get a URL reference to the file using window.URL.createObjectURL (_createDownloadData)
  • set required attributes to an anchor which will be used to download file (prepareFileExport)

This approach require from the user two steps:

  1. Click on some "Prepare data" button
  2. After file is generated, click on a link to download actual file.

But you can easily implement download a file function in your extension.

JavaScript:

var FileDownload = {

  //Existing file URL.
  exportFileObjectUrl: null,

  // add click listener to the "prepare" button
  initialize: function(){
    FileDownload.prepareButton.addEventListener('click', FileDownload.prepareFileExport);
  },

  // prepare the file and "add" it the download button.
  prepareFileExport: function(e){
    var content = FileDownload._getFileContents();
    var contentType = 'application/json';
    FileDownload.exportFileObjectUrl = FileDownload._createDownloadData(content, contentType);

    var fileName = "some_file.json";
    FileDownload.downloadButton.href = FileDownload.exportFileObjectUrl;
    FileDownload.downloadButton.setAttribute("download", fileName);
    FileDownload.downloadButton.setAttribute("data-downloadurl", contentType + ":" + fileName + ":" + FileDownload.exportFileObjectUrl);
    FileDownload.downloadButton.removeAttribute("hidden");
  },

  // File content generator
  _getFileContents: function(){
    //generate some content as a string.
    var mock = {
      'a': 'test data'
    };
    return JSON.stringify(mock);
  },

  //Result with URL to the file.
  _createDownloadData: function(data, contentType){
    if(FileDownload.exportFileObjectUrl !== null){
      FileDownload._revokeDownloadData();
    }
    var blob = new window.Blob([data], {type: contentType});
    return window.URL.createObjectURL(blob);
  },

  /// Cleanup.
  _revokeDownloadData: function(){
    window.URL.revokeObjectURL(FileDownload.exportFileObjectUrl);
  },

  // a reference to the "prepare" button
  get prepareButton(){
    /// prepare button.
    return document.querySelector('[prepare]');
  },

  // a reference to the "download" button.
  get downloadButton(){
    /// Download button.
    return document.querySelector('[download]');
  }

};

FileDownload.initialize();

HTML:

<button prepare>Prepare data</button>
<a href="about:blank" download hidden>Download data</a>
1
  • Hi Paweł Psztyć, first thanks for your answer.I currently use chrome extension download api to write files to user,what i missed originally is how to turn a Blob object to a url, which can be solved using window.URL.createObjectURL(blob)
    – Jiacai Liu
    Jan 14, 2015 at 2:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.