铬扩展下载本地存储数据 [英] chrome extension download localstorage data

问题描述

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

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

stackoverflow扩展API，我发现铬扩展无法使用 fileSystem api读取/写入文件，因为它只能在应用程序中使用，所以我只能从

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

然后我发现chrome 扩展api下载。在下载的方法，它需要一个参数，也就是说，这是要下载的网址。

所以我的问题是：

1. 有没有可能通过这种方法下载本地数据，或
   
2. 是否有其他的方式来保存用户的自定义数据？ li>
   

解决方案

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

流程如下：

• 生成文件内容作为用户操作的回调（_getFileContents）
  
• 使用Blob构造函数创建文件（_createDownloadData）


• 使用window.URL.createObjectURL（_createDownloadData）获得对文件的URL引用。
  
• 将必需的属性设置为将用于下载文件的锚点（prepareFileExport） li>
  

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

<点击一些准备数据按钮

1. 生成文件后，点击一个链接下载实际文件。

但是，您可以轻松地在您的扩展程序中实现下载文件功能。
$ b JavaScript：

  var FileDownload = {
 
 //现有的文件URL。 
 exportFileObjectUrl：null，
 
 //将点击监听器添加到准备按钮
 initialize：function（）{
 FileDownload.prepareButton.addEventListener（'click' ，FileDownload.prepareFileExport）; 
}，
 
 //准备文件并将其添加到下载按钮。 
 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）; 
}，
 
 //文件内容生成器
 _getFileContents：function（）{
 //将某些内容作为字符串生成。 
 var mock = {
'a'：'测试数据'
}; 
返回JSON.stringify（mock）; 
}，
 
 //带有该文件URL的结果。 
 _createDownloadData：function（data，contentType）{
 if（FileDownload.exportFileObjectUrl！== null）{
 FileDownload._revokeDownloadData（）; 
} 
 var blob = new window.Blob（[data]，{type：contentType}）; 
返回window.URL.createObjectURL（blob）; 
}，
 
 ///清理。 
 _revokeDownloadData：function（）{
 window.URL.revokeObjectURL（FileDownload.exportFileObjectUrl）; 
}，
 
 //引用准备按钮
 get prepareButton（）{
 ///准备按钮。 
返回document.querySelector（'[prepare]'）; 
}，
 
 //引用下载按钮。 
得到downloadButton（）{
 ///下载按钮。 
返回document.querySelector（'[download]'）; 
} 
 
}; 
 
 FileDownload.initialize（）; 
  

HTML：

 <按钮准备>准备资料< /按钮> 
< a href =about：blank下载隐藏>下载资料< / a> 
  

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?

解决方案

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>

这篇关于铬扩展下载本地存储数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！