Using Google Chrome extensions to import/export JSON files?

Question

I'm creating a Google Chrome extension at the moment and I was wondering if it's possible for it to both create JSON files to download (export) and create a button where users can make the extension open and parse JSON files that they have saved in their local file system or on a USB stick (import)?

The parsing of each JSON from the local file system would simply involve reading off each key-value pair and doing something with the data. It would only have to deal with strings, so nothing complicated.

**EDIT: **My question is not a duplicate of this one because I'm not interested in changing the user's download path. All I want is to enable them to, with their consent, download a file to their normal download directory (which Filesaver.js can do). Plus, that post says nothing about importing.

saving a json file is trivial with filesaver.js, depends on what you want to do with the parsed json — Daniel Lizik, Aug 08 '16 at 15:54
@Daniel_L thanks for the tip. Filesaver.js looks great for saving JSON files but what about opening user-created ones? — user5508297, Aug 08 '16 at 16:00
can you edit your question to indicate exactly what you want to do with the uploaded json file — Daniel Lizik, Aug 08 '16 at 16:07
To answer the question literally: yes, it's possible. P.S. It looks like asking without having googled existing solutions and examples. — wOxxOm, Aug 08 '16 at 16:08
@wOxxOm apologies if it comes across that way. I have found some answers regarding exporting JSON outside of Chrome extensions but wanted to ask about it anyway in case someone suggested a Chrome extension-specific way of doing it (which I haven't yet seen). I also didn't find anything particularly useful regarding importing JSON files from a user's file system. — user5508297, Aug 08 '16 at 16:38
Possible duplicate of [Chrome Extension HTML Filesystem Access](http://stackoverflow.com/questions/8218890/chrome-extension-html-filesystem-access) — Daniel Lizik, Aug 08 '16 at 16:55
@Daniel_L it's not a duplicate because I'm not interested in changing the user's download path. All I want is to enable them to, with their consent, download a file to their normal download directory (which Filesaver.js can do). Plus, that post says nothing about importing. — user5508297, Aug 08 '16 at 17:09
"import" is not the operative word you want, "access" is better. you cannot access/import/export to a target path in the local filesystem. "download" is different. — Daniel Lizik, Aug 08 '16 at 17:11
Something like these I guess: [download](http://stackoverflow.com/questions/25734072/creating-javascript-blob-with-data-from-html-element-then-downloading-it-as-a) button, [Upload](http://stackoverflow.com/a/12282163/3959875) button. — wOxxOm, Aug 08 '16 at 17:32
@wOxxOm thank you so much! Those links look very promising - will test later. — user5508297, Aug 08 '16 at 17:41

score 18 · Accepted Answer · edited Oct 16 '17 at 02:44

You can fake link to "download" imaginary array MyData or whatever,:

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();

this will export/download your array into json file named as vName variable.

If you wish to import/read file:
create input element (type=file) and make it invisible (here I'm having html element and then adding js listener in script)

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

script

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

make button fakeImp (or any element), that you can style as you wish and that will be used as trigger for importing event

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

import function (from listener)

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
}

Using Google Chrome extensions to import/export JSON files?

1 Answers1

Linked