对 import/export JSON 文件使用 Google Chrome 扩展名？

Question

我现在正在创建一个 Google Chrome 扩展，我想知道它是否可以同时创建 JSON 个文件来下载（ export) 并创建一个按钮，用户可以在其中打开扩展程序并解析他们保存在本地文件系统或 U 盘中的 JSON 文件 (import)?

从本地文件系统解析每个 JSON 只涉及读取每个键值对并对数据进行处理。它只需要处理字符串，所以没有什么复杂的。

**编辑：**我的问题不是 this one 的重复问题，因为我对更改用户的下载路径不感兴趣。我想要的只是让他们能够在他们同意的情况下将文件下载到他们的正常下载目录（Filesaver.js 可以做到）。另外，post 没有提到导入。

Answer 1

你可以将 link 伪造成 "download" 假想数组 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();

这会将您的数组 export/download 放入名为 vName 变量的 json 文件中。

如果你想import/read文件：
创建输入元素 (type=file) 并使其不可见（这里我有 html 元素，然后在脚本中添加 js 侦听器）

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

脚本

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

制作按钮 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
}

对 import/export JSON 文件使用 Google Chrome 扩展名？

Using Google Chrome extensions to import/export JSON files?

javascript

json

google-chrome

google-chrome-extension

google-chrome-app