From cdbf710ec0c880abebdae098525562e4b8492bad Mon Sep 17 00:00:00 2001 From: milanmilosev Date: Mon, 25 Nov 2019 20:23:24 +0100 Subject: [PATCH 1/4] Run each time Chrome extension icon clicked --- background.js | 13 +++++-------- image.svg | 52 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 3 +-- style.css | 6 +++--- 4 files changed, 59 insertions(+), 15 deletions(-) diff --git a/background.js b/background.js index f029b40..401d805 100644 --- a/background.js +++ b/background.js @@ -1,12 +1,9 @@ -// background.js +// Run script each time Chrome extension icon clicked 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" - }); + chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { + var activeTab = tabs[0]; + chrome.tabs.sendMessage(activeTab.id, { + message: "FETCH_IMAGE" }); }); }); 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 ce9cf2a..a0e330d 100755 --- a/index.html +++ b/index.html @@ -11,8 +11,7 @@

- eBay - Kleinanzeigen Full Size Images + eBay Kleinanzeigen Full Size Images

diff --git a/style.css b/style.css index 2a2c084..d78358a 100644 --- a/style.css +++ b/style.css @@ -47,10 +47,10 @@ } .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; } From ab882e71293b267c9d78e5530ce07fed8f7d376f Mon Sep 17 00:00:00 2001 From: milanmilosev Date: Mon, 25 Nov 2019 20:47:52 +0100 Subject: [PATCH 2/4] no image message added --- background.js | 8 ++++---- index.html | 12 ++++++++++-- style.css | 29 +++++++++++------------------ 3 files changed, 25 insertions(+), 24 deletions(-) diff --git a/background.js b/background.js index 401d805..ae5501d 100644 --- a/background.js +++ b/background.js @@ -12,14 +12,14 @@ chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { if (request.message === "SHOW_RESULTS") { const status = request.results.status; const app = document.querySelector(".ebay-klein__result"); - const containerImg = document.querySelector(".ebay-klein__main__image"); + const noImageMsg = document.querySelector(".ebay-klein__no-image"); + + status ? (noImageMsg.style.display = "none") : null; - status ? (containerImg.style.display = "none") : null; - console.log(app); app.innerHTML = status ? request.results.imageSource.map( img => `` ) - : `

There's no images

`; + : null; } }); diff --git a/index.html b/index.html index a0e330d..632aeba 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 d78358a..06d0f23 100644 --- a/style.css +++ b/style.css @@ -54,24 +54,6 @@ 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%; } @@ -91,3 +73,14 @@ padding: 0; border: 0; } + +.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; +} From 0211b51945e6871386bc0604db039b2e16f4e0ef Mon Sep 17 00:00:00 2001 From: milanmilosev Date: Mon, 25 Nov 2019 21:02:48 +0100 Subject: [PATCH 3/4] code improvement --- background.js | 18 +++++++++--------- content.js | 4 ++-- style.css | 2 +- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/background.js b/background.js index ae5501d..8df2903 100644 --- a/background.js +++ b/background.js @@ -1,6 +1,6 @@ // Run script each time Chrome extension icon clicked -document.addEventListener("DOMContentLoaded", function() { - chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) { +document.addEventListener("DOMContentLoaded", () => { + chrome.tabs.query({ active: true, currentWindow: true }, tabs => { var activeTab = tabs[0]; chrome.tabs.sendMessage(activeTab.id, { message: "FETCH_IMAGE" @@ -8,18 +8,18 @@ document.addEventListener("DOMContentLoaded", function() { }); }); -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 noImageMsg = document.querySelector(".ebay-klein__no-image"); status ? (noImageMsg.style.display = "none") : null; - app.innerHTML = status - ? request.results.imageSource.map( - img => `` - ) - : 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/style.css b/style.css index 06d0f23..9d3e785 100644 --- a/style.css +++ b/style.css @@ -45,7 +45,6 @@ background: rgb(255, 255, 255); margin: 8px 0px; } - .ebay-klein__main__image { background: url("image.svg") no-repeat center center; background-size: cover; @@ -64,6 +63,7 @@ padding: 5px; justify-content: space-evenly; } + .ebay-klein__result a { margin: 5px; width: 45%; From 98c32fd9abea6045497aeba11a224b929403e485 Mon Sep 17 00:00:00 2001 From: milanmilosev Date: Mon, 25 Nov 2019 21:32:40 +0100 Subject: [PATCH 4/4] gallery style improved --- style.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 9d3e785..e722238 100644 --- a/style.css +++ b/style.css @@ -66,12 +66,21 @@ .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 {