lightbox style, prevent background js change file name when download single image on fetch js

background.js

@@ -40,19 +40,20 @@ chrome.downloads.onDeterminingFilename.addListener(function(item, suggest) {
 
   if(item.url.includes("https://digitallibrary-external.fastretailing.com/api/asset")){
     chrome.storage.local.get(['idArray', 'index'], function (items) {
-      let index = items.index;
-      let idArray = items.idArray.split(',');
-      let new_filename = idArray[index] + ".zip"; 
-      
-      suggest({filename: new_filename});
-      chrome.storage.local.set({index: (index+1)});
-      index += 1;
-
-      if(index >= idArray.length) {
-        console.log("Last file was downloaded");
-        chrome.storage.local.remove(['idArray', 'index']);
+      if(Object.keys(items).length !== 0){
+        let index = items.index;
+        let idArray = items.idArray.split(',');
+        let new_filename = idArray[index] + ".zip"; 
+        
+        suggest({filename: new_filename});
+        chrome.storage.local.set({index: (index+1)});
+        index += 1;
+  
+        if(index >= idArray.length) {
+          console.log("Last file was downloaded");
+          chrome.storage.local.remove(['idArray', 'index']);
+        }
       }
-
       return true;
     });
     return true;

fetch/lightbox.css

@@ -41,6 +41,8 @@
     grid-template-rows: 1fr 2fr;
 }
 
+/* general */
+
 #fetch-lightbox .lightbox-content > div{
     padding: 15px;
 }
@@ -71,6 +73,40 @@
     margin-right: 5px;
 }
 
+/*operation and button style*/
+
+#fetch-lightbox .operation-box{
+    grid-column-start: 1;
+    grid-row-start: 2;
+}
+
+#fetch-lightbox button{
+    display: inline-block;
+    padding: 12px;
+    margin-bottom: 5px;
+    border: 2px solid transparent;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#fetch-lightbox button:hover{
+    border-color: black;
+}
+
+#searchSKUs{
+    background-color: hsl(40, 75%, 80%);
+}
+
+#downloadSelectedSKUs{
+    background-color: hsl(60, 75%, 80%);
+}
+
+#downloadAllSKUs{
+    background-color: hsl(80, 75%, 80%);
+}
+
+/* info box and debug box*/
+
 #fetch-lightbox .info-box{
     grid-column-start: 2;
     grid-row-start: 1;
@@ -78,14 +114,15 @@
 
     border: 2px solid #cccccc;
     border-radius: 5px;
-    overflow: scroll;
+    overflow-y: scroll;
 
     position: relative;
 }
 
-#fetch-lightbox .operation-box{
-    grid-column-start: 1;
-    grid-row-start: 2;
+#fetch-lightbox .debug-box{
+    width: 100%;
+    height: 100%;
+    padding-top: 12px;
 }
 
 #fetch-lightbox .info-message{
@@ -94,12 +131,11 @@
     left: 15px;
 }
 
-#fetch-lightbox .debug-box{
-    width: 100%;
-    height: 100%;
-    padding-top: 12px;
+#fetch-lightbox .spacing{
+    padding-top: 50px;
 }
 
+/* asset item*/ 
 #fetch-lightbox .asset-item{
     width: 200px;
     margin: 3px;
@@ -132,39 +168,6 @@
 }
 
 
-#fetch-lightbox button{
-    display: inline-block;
-    padding: 12px;
-    margin-bottom: 5px;
-    border: 2px solid transparent;
-    border-radius: 5px;
-    cursor: pointer;
-}
-
-#fetch-lightbox button:hover{
-    border-color: black;
-}
-
-#searchSKUs{
-    background-color: hsl(40, 75%, 80%);
-}
-
-#downloadSelectedSKUs{
-    background-color: hsl(60, 75%, 80%);
-}
-
-#downloadAllSKUs{
-    background-color: hsl(80, 75%, 80%);
-}
-
-#saveSession{
-    background-color: hsl(60, 85%, 90%);
-}
-
-#loadSession{
-    background-color: hsl(40, 85%, 90%);
-}
-
 #lightbox-switch{
     position: fixed;
     right: 0px;

fetch/lightbox.html

@@ -21,11 +21,13 @@
             <h6>Search and Download</h6>
             <div class="input-box">
                 <label>Date: </label>
-                <input type="text" id="filter-date" name="filter-date" value="7" >
+                <input type="text" id="filter-date" name="filter-date" value="">
             </div>
             <button id="searchSKUs">Search</button>
             <button id="downloadSelectedSKUs">Download</button>
 
+            <div class="spacing"></div>
+
             <h6>Download All SKUs</h6>
             <button id="downloadAllSKUs">Download</button>
             <a id="download-trigger" href="#" download hidden >Download</a>