v1.1-refactoring merge into master

background.js

@@ -1,28 +1,25 @@
-// background.js
-document.addEventListener("DOMContentLoaded", function() {
-  const button = document.getElementById("loadImages");
-  button.addEventListener("click", function() {
-    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
-      var activeTab = tabs[0];
-      chrome.tabs.sendMessage(activeTab.id, {
-        message: "FETCH_IMAGE"
-      });
+// Run script each time Chrome extension icon clicked
+document.addEventListener("DOMContentLoaded", () => {
+  chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
+    var activeTab = tabs[0];
+    chrome.tabs.sendMessage(activeTab.id, {
+      message: "FETCH_IMAGE"
     });
   });
 });
 
-chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.message === "SHOW_RESULTS") {
-    const status = request.results.status;
+    const status = request.results.imageSource.length;
     const app = document.querySelector(".ebay-klein__result");
-    const containerImg = document.querySelector(".ebay-klein__main__image");
+    const noImageMsg = document.querySelector(".ebay-klein__no-image");
 
-    status ? (containerImg.style.display = "none") : null;
-    console.log(app);
-    app.innerHTML = status
-      ? request.results.imageSource.map(
-          img => `<a href="${img}" target="_blank"><img src="${img}"/></a>`
-        )
-      : `<p>There's no images</p>`;
+    status ? (noImageMsg.style.display = "none") : null;
+
+    if (status) {
+      app.innerHTML = request.results.imageSource
+        .map(img => `<a href="${img}" target="_blank"><img src="${img}"/></a>`)
+        .join(" ");
+    }
   }
 });

content.js

@@ -1,4 +1,4 @@
-chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   if (request.message === "FETCH_IMAGE") {
     // Extract images from product page or gallery
     const imageContainer =
@@ -9,11 +9,11 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
     const imageSource =
       imageArray.length && imageArray.map(src => src.getAttribute("src"));
 
+    console.log(imageSource[0]);
     // Listener
     chrome.runtime.sendMessage({
       message: "SHOW_RESULTS",
       results: {
-        status: imageSource ? true : false,
         imageSource: imageSource
       }
     });

index.html

@@ -15,9 +15,17 @@ <h3>
         </h3>
       </div>
       <div class="ebay-klein__main">
-        <div class="ebay-klein__main__image"></div>
         <div class="ebay-klein__result"></div>
-        <button class="ebay-klein__btn" id="loadImages">Load images</button>
+        <div class="ebay-klein__no-image">
+          <div class="ebay-klein__main__image"></div>
+          <p class="ebay-klein__no-image__text">
+            Sorry, it seems there's no images.<br />Be sure you are on the
+            <a href="https://www.ebay-kleinanzeigen.de" target="_blank"
+              >ebay-kleinanzeigen</a
+            >
+            AD page!
+          </p>
+        </div>
       </div>
     </div>
     <script src="background.js"></script>

style.css

@@ -45,33 +45,14 @@
   background: rgb(255, 255, 255);
   margin: 8px 0px;
 }
-
 .ebay-klein__main__image {
-  background: url("https://svgshare.com/i/GMS.svg") no-repeat center center;
+  background: url("image.svg") no-repeat center center;
   background-size: cover;
-  width: 200px;
-  height: 200px;
+  width: 150px;
+  height: 150px;
   margin: 50px auto 0;
 }
 
-.ebay-klein__btn {
-  font-family: Helvetica, sans-serif;
-  font-size: 13px;
-  min-width: 140px;
-  min-height: 26px;
-  margin: 20px auto;
-  min-width: 65px;
-  box-sizing: border-box;
-  text-align: center;
-  height: 30px;
-  width: 47%;
-  display: block;
-  cursor: pointer;
-  border-radius: 3px;
-  padding: 0px 5px;
-  background: linear-gradient(rgb(247, 247, 247) 0%, rgb(255, 255, 255) 100%);
-  border: 1px solid rgb(171, 182, 191);
-}
 .ebay-klein__image-svg {
   width: 100%;
 }
@@ -82,12 +63,33 @@
   padding: 5px;
   justify-content: space-evenly;
 }
+
 .ebay-klein__result a {
   margin: 5px;
-  width: 45%;
+  transition: all 0.22s;
+  width: 136px;
+  height: 136px;
+}
+
+.ebay-klein__result a:hover {
+  opacity: 0.8;
 }
+
 .ebay-klein__result img {
   width: 100%;
+  height: 100%;
   padding: 0;
   border: 0;
+  object-fit: cover;
+}
+
+.ebay-klein__no-image__text {
+  color: rgb(100, 115, 130);
+  text-align: center;
+  padding: 10px 20px;
+}
+
+.ebay-klein__no-image__text a {
+  color: rgb(100, 115, 130);
+  font-weight: bold;
 }