chrome 扩展下载本地存储数据

Question

我目前开发了一个用户可以通过选项页面自定义的扩展，我使用localStorage来保存数据。现在我想做这样一个功能，用户可以导出他们自定义的数据，这样他可以与其他人共享，用户也可以导入其他人导出的数据。

也就是说，我想要导入和导出功能。

google了stackoverflow,extension apis，发现chrome扩展不能使用fileSystemapi读写文件，只能在app中使用，只能求助html5 filesystem api

使用 html5 filesystme api，我实际上可以打开一个文件并读取它。 但是说到写文件，html5只能在沙箱中写文件，这绝对不是我想要的。

然后我找到了 chrome extension api download。在下载方法中，需要一个参数，即要下载的url。

所以我的问题是：

1. 有没有可能通过这个方法下载localstoage数据，或者
2. 还有其他方法可以保存用户的自定义数据吗？

Answer 1

Xan 讨论中引用的解决方案有点过时了。前段时间我在我的扩展中做了同样的事情。它是在 GWT 框架中，所以现在我快速编写了 JS 版本（见下面的代码）。

流程如下：

• 生成文件内容作为用户操作的回调 (_getFileContents)
• 使用 Blob 构造函数创建文件 (_createDownloadData)
• 使用 window.URL.createObjectURL (_createDownloadData) 获取文件的 URL 引用
• 将所需属性设置为将用于下载文件的锚点 (prepareFileExport)

这种方法需要用户两个步骤：

1. 点击一些“准备数据”按钮
2. 文件生成后，点击链接下载实际文件。

但是你可以在你的扩展中轻松实现下载文件功能。

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>