download json data

index.html

@@ -30,7 +30,7 @@
       <h2>Data</h2>
       <div>
         <!-- @todo add click to save data -->
-        <button class="download">Save Data</button>
+        <button class="download" id="save-data-button">Save Data</button>
         <button class="reset" id="reset-data-button">Reset Data</button>
       </div>
       <div class="nav-links">

js/lightbeam.js

@@ -112,12 +112,35 @@ let websites;
 async function initLightBeam() {
   websites = await storeChild.getAll();
   renderGraph(websites);
+  addEventListeners();
+}
 
-  const resetData = document.getElementById('reset-data-button');
-  resetData.addEventListener('click', () => {
-    storeChild.reset().then(() => {
-      window.location.reload();
+function addEventListeners() {
+  downloadData();
+  resetData();
+}
+
+function downloadData() {
+  const saveData = document.getElementById('save-data-button');
+  saveData.addEventListener('click', async () => {
+    const data = await storeChild.getAll();
+    const blob = new Blob([JSON.stringify(data ,' ' , 2)],
+      {type : 'application/json'});
+    const url = window.URL.createObjectURL(blob);
+    const downloading = browser.downloads.download({
+      url : url,
+      filename : 'lightbeamData.json',
+      conflictAction : 'uniquify'
     });
+    await downloading;
+  });
+}
+
+function resetData() {
+  const resetData = document.getElementById('reset-data-button');
+  resetData.addEventListener('click', async () => {
+    await storeChild.reset();
+    window.location.reload();
   });
 }
 

manifest.json

@@ -15,7 +15,8 @@
     "webRequest",
     "<all_urls>",
     "tabs",
-    "storage"
+    "storage",
+    "downloads"
   ],
 
   "browser_action": {