使用Google Chrome扩展程序导入/导出JSON文件？

Question

我现在正在创建Google Chrome扩展程序,我想知道它是否可以创建JSON文件以进行下载(导出)并创建一个按钮,用户可以在其中打开扩展程序并解析他们已保存的JSON文件他们的本地文件系统或USB记忆棒(导入)？

从本地文件系统解析每个JSON只需要读取每个键值对并对数据执行某些操作.它只需要处理字符串,所以没有什么复杂的.

**编辑:**我的问题不是这个问题的重复,因为我对更改用户的下载路径不感兴趣.我想要的是让他们在征得他们的同意后,将文件下载到他们的正常下载目录(Filesaver.js可以做到).另外,该帖子没有说明导入.

Answer 1

你可以伪造链接到"下载"虚构的数组MyData或其他,:

var MyArray = [elem1, elem2, ....];
var _myArray = JSON.stringify(MyArray , null, 4); //indentation in json format, human readable

var vLink = document.createElement('a'),
vBlob = new Blob([_myArray], {type: "octet/stream"}),
vName = 'watever_you_like_to_call_it.json',
vUrl = window.URL.createObjectURL(vBlob);
vLink.setAttribute('href', vUrl);
vLink.setAttribute('download', vName );
vLink.click();

这会将您的数组导出/下载到名为vNamevariable的json文件中.

如果你想导入/读取文件:
创建输入元素(type = file)并使其不可见(这里我有html元素,然后在脚本中添加js listener)

<input type="file" id="importOrig" accept=".json" style="display:none"/>

脚本

importOrig.addEventListener("change", importFun, false);

make button fakeImp(或任何元素),您可以根据需要设置样式,并将其用作导入事件的触发器

fakeImp.onclick = function () {importOrig.click()}

导入功能(来自听众)

function importFun(e) {
  var files = e.target.files, reader = new FileReader();
  reader.onload = _imp;
  reader.readAsText(files[0]);
}

function _imp() {
  var _myImportedData = JSON.parse(this.result);
  //here is your imported data, and from here you should know what to do with it (save it to some storage, etc.)

  ......
  importOrig.value = ''; //make sure to clear input value after every import
}