chrome extension download localstorage data

问题:

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:

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>