diff --git a/background.js b/background.js index f029b40..8df2903 100644 --- a/background.js +++ b/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 => `` - ) - : `

There's no images

`; + status ? (noImageMsg.style.display = "none") : null; + + if (status) { + app.innerHTML = request.results.imageSource + .map(img => ``) + .join(" "); + } } }); diff --git a/content.js b/content.js index 2bebddb..96515bf 100644 --- a/content.js +++ b/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 } }); diff --git a/image.svg b/image.svg index bdaa345..2727e8b 100644 --- a/image.svg +++ b/image.svg @@ -1,2 +1,50 @@ - -Image + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index c0b03b5..e4be704 100755 --- a/index.html +++ b/index.html @@ -15,9 +15,17 @@

-
- +
+
+

+ Sorry, it seems there's no images.
Be sure you are on the + ebay-kleinanzeigen + AD page! +

+
diff --git a/style.css b/style.css index 2a2c084..e722238 100644 --- a/style.css +++ b/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; }