Notes aren't Persistent #7 issue solved

manifest.json

@@ -4,7 +4,8 @@
   "version": "1.0",
   "manifest_version": 3,
   "permissions": [
-    "tabs"
+    "tabs",
+    "storage"
   ],
   "action" : {
     "default_title": "EtherScan Scraper",

popup.css

@@ -58,7 +58,8 @@ input[type=text] {
 }
 
 #scrapeButton {
-    height: 40vh;
+    height: 30px;
+    width: 95vw;
 }
 
 #prompt {

popup.html

@@ -14,9 +14,7 @@ <h3>
                 EtherScan Address Notes Scraper
             </h3>
         </div>
-        <div id="scrape">
-            <button id="scrapeButton">SCRAPE</button>
-        </div>
+
         <div id="prompt">
             <p>
                 Open <i>'etherscan.io/mynotes_address'</i>?
@@ -33,6 +31,9 @@ <h3>
             <button id="downloadButton">DOWNLOAD</button>
             <a id="downloadAnchor"></a>
         </div>
+        <div id="scrape">
+            <button id="scrapeButton">SCRAPE</button>
+        </div>
         <script src="popup.js"></script>
     </body>
 </html>

popup.js

@@ -14,7 +14,16 @@ document.addEventListener('DOMContentLoaded', async() => {
 
     let addressNotes; // address notes returned from a scrape
     let displayNotes; // address notes being displayed in a table, whether all or just those returned from a search
-
+    chrome.storage.sync.get(/* String or Array */["data"], function(items){
+        //  items = [ { "phasersTo": "awesome" } ]
+        addressNotes = items.data;
+        displayNotes = items.data;
+        // alert(displayNotes.length);
+        if(addressNotes.length > 0){
+            generateNotesTable();
+        }
+        // console.log(items);
+    });
     /**
      * Retrieves the currently focused tab
      * @returns {Promise<*>}
@@ -119,14 +128,22 @@ document.addEventListener('DOMContentLoaded', async() => {
      * Either displays all scraped address note values, or address note values returned in a search.
      */
     function generateNotesTable() {
+        chrome.storage.sync.set({ "data": displayNotes}, function(){
+            // alert("hello");
+        });
         if (addressNotes.length === 0) {
             generateError("There are no address notes");
         } else {
+
+            // chrome.storage.sync.set({ "data2": displayNotes}, function(){
+            //     // alert("hello");
+            // });
+
             document.getElementById("notes").style.display = "block";
             document.getElementById("search").style.display = "block";
-            document.getElementById("scrape").style.display = "none";
+            // document.getElementById("scrape").style.display = "none";
             document.getElementById("downloadButton").style.display = "block";
-
+            scrapeButton.innerText = "SCRAPE";
             let div = document.getElementById("notes-table");
             let table = document.createElement("table");
             let tableBody = document.createElement("tbody");