From 8d2243c14bb3ba5c93d220c28156a4741a0d77bb Mon Sep 17 00:00:00 2001 From: "Lucas F. Guanabara" Date: Tue, 23 Jul 2024 23:01:01 -0300 Subject: [PATCH] Better UI some updates to the UI --- .../ColorCatcher_EXTENSION.pem | 28 ------ Popup.html | 95 ++++++++---------- contentScript.js | 9 +- popup.js | 99 ++++++++++--------- 4 files changed, 98 insertions(+), 133 deletions(-) delete mode 100644 Compressed extension/ColorCatcher_EXTENSION.pem diff --git a/Compressed extension/ColorCatcher_EXTENSION.pem b/Compressed extension/ColorCatcher_EXTENSION.pem deleted file mode 100644 index bae1367..0000000 --- a/Compressed extension/ColorCatcher_EXTENSION.pem +++ /dev/null @@ -1,28 +0,0 @@ ------BEGIN PRIVATE KEY----- -MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDjoG/cFh4mahSx -BFM0kuOmOE5sx+3fQ8V57SkLEgDYDcIr1KH8J+RvJaKSUF82UgiOw7B4zvWc+CRK -R12SoLhkaVbPxKZrPOorQMaDhk8z/3sIVDfdLwgpmE4x05BbQnj9jCjekkaj1V8J -cSiF2ElHYnfUCbo3WTm+rzUxawY+aP3dzuQtpQQyxA0PlK2WRNatJ2+mjr90kIh0 -AzeWNY/sOOo8+enkRm3fG/zr2GIhafRQx7XqA6DA+ImAUTf5Fq4EXl0zqVzK7Rcm -YOHCJvPLMLd61y/sgURAXh2hqtIAayWEHEtwgEt6wbGQ/VF0pH0ukX66g9vJ0dOo -zaS0EFwLAgMBAAECggEAM7RhRE5X2eT1v0HavpHxGPQoSEhfrXvA8xGeZY/Y1jrF -1NvvUY4kMuULGQ4dmoKmw/sKbl6gZt/sqlyskh5k1BYjbH1gSfKjxGBp1z1eZ1LM -eRdcOycwRPZ+KI5Ed55RSlKYg/oZBqT0efoUuNZoysjArE7rWCAx4DD/NbL4T5tv -AXVhivhwod2ZO2rzCSsQvJ34guf/iJlCSfhrRSQhZM8fTZ2vHEvBQORPO1frAh3Q -8ALWFntFDny9xEWjZiepWBmZtAqFgT4dQW1iXuZgHXGRjtqQMT6XJMUwqQbVXYEU -wFpfUzqP9cC5i+8u5Arqy1ZtzjCWwntGFAU4jyF9sQKBgQD2ztarhAmwmoG4rXsv -z+TVYdPhYuRgkjBgJw1Hu4ws6KN3rj5mF5Q+exgtvC/GkycjMdhGfnmFMqXAYLgl -9MqRdkRl8bPkTUC8g2g0FJ85M7D1ZNOXiG722vQ5gHFFSSKQfRtJnW5i4jJykTau -8sF7zd0/xW1jpN8QrPN0H6NhMQKBgQDsGreLUBbS0ehJGhFVDQa6xF77FED4+XUP -4saJ132WAOabFhawNeztskj0mo9UtoNbAfZsjST7NFGhC8wmhwsf+QX+wvlSa9jD -ySDwiLmOapYjxhBn9Z7I6htfLXx5C619DmEVIEtITJtUjXTQw0oYJog4PW+9HGAH -bjkWwLTh+wKBgGICJzs7FsH7yTG2KmoFK4EU9RfWtowm4XD9cQegUXzv8SIwnnTa -PjNFnIdk6K/5dZxDSfhMdyNOxoWLovTnrZ1wEp9NCTvK9b8mi7XKzqPfhBEetevB -8Ra0QjGncNOrxD8Of0yPaOt5mcDnK4jzu6PXT1noo5TjPvWXSKI/ghixAoGAMyki -5ownNe2IMPb2FIDrGWNd1XgxEAI2DIguT0Yjj3KIhciGiA5XVbZROreXIVsfIYRO -Wn1HKyvOGGCPDzYqAfabBvZGwkZeRSZ6/cQSuTp9aCkN+wjtLEoWPkyD8VLHeBa6 -kLJbvcHj0rGIQ4hdsNgAoncllEvmvxVyR2zghSsCgYEAujN6MI8u4Z4JXGtGn5Br -NIvwahiOcJPIJAcNu9TwGyjjfCpenD2AroquGhAxxWOn0zTGEJ1bc39q1yAuJH/0 -6p5FIR6+jxOwcNZNab6JZNNw2DOgs6yN+1AbVi6wdsQnAxW7kCAJm8c9TS9oHwbz -XO3//H0t+3FE0O6frvETarQ= ------END PRIVATE KEY----- diff --git a/Popup.html b/Popup.html index a65bcac..d9c19e3 100644 --- a/Popup.html +++ b/Popup.html @@ -1,65 +1,79 @@ - ColorCatcher - -

ColorCatcher

- - +
+ - - - \ No newline at end of file + diff --git a/contentScript.js b/contentScript.js index b866dec..41059a4 100644 --- a/contentScript.js +++ b/contentScript.js @@ -1,5 +1,4 @@ -console.log("content script injected rsrs") - +console.log("content script injected rsrs"); chrome.runtime.onMessage.addListener((message, sender) => { if (message.from === "popup" && message.query === "eye_dropper_clicked") { @@ -14,13 +13,13 @@ chrome.runtime.onMessage.addListener((message, sender) => { chrome.storage.local.set({ "color_hex_code": [...resp.color_hex_code, result.sRGBHex] }) } else { - console.log("no") + console.log("no"); chrome.storage.local.set({ "color_hex_code": [result.sRGBHex] }) } }) }).catch(e => { - console.log(e) + console.log(e); }) }, 500); } -}) \ No newline at end of file +}); diff --git a/popup.js b/popup.js index 8866562..e56a571 100644 --- a/popup.js +++ b/popup.js @@ -1,79 +1,82 @@ - window.addEventListener('DOMContentLoaded', () => { const mainCont = document.getElementById("mainCont"); const buttonCont = document.getElementById("picker_btn_cont"); const resultList = document.getElementById("result"); const GiveMetheChild = (color, msg) => { - const errorLabel = document.createElement("p") - errorLabel.setAttribute("class", "errorLabel") - errorLabel.style.backgroundColor = color - errorLabel.innerText = msg + const errorLabel = document.createElement("p"); + errorLabel.setAttribute("class", "errorLabel"); + errorLabel.style.backgroundColor = color; + errorLabel.innerText = msg; - mainCont.appendChild(errorLabel) + mainCont.appendChild(errorLabel); setTimeout(() => { - mainCont.removeChild(errorLabel) - }, 2000) - } + mainCont.removeChild(errorLabel); + }, 2000); + }; chrome.tabs.query({ active: true, currentWindow: true }, tabs => { - const tab = tabs[0] - - if (tab.url === undefined || tab.url.indexOf('chrome') == 0) { - buttonCont.innerHTML = 'Color Catcher não pode acessar páginas do Chrome' - } - else if (tab.url.indexOf('file') === 0) { - buttonCont.innerHTML = 'EColor Catcher não pode acessar páginas locais' + const tab = tabs[0]; + if (tab.url === undefined || tab.url.indexOf('chrome') === 0) { + buttonCont.innerHTML = 'ColorCatcher não pode acessar páginas do Chrome'; + } else if (tab.url.indexOf('file') === 0) { + buttonCont.innerHTML = 'ColorCatcher não pode acessar páginas locais'; } else { - const button = document.createElement("button") - button.setAttribute("id", "picker_btn") - button.innerText = "Selecionar cor da página da web" + const button = document.createElement("button"); + button.setAttribute("id", "picker_btn"); + button.innerText = "Selecionar cor da página da web"; button.addEventListener("click", () => { if (!window.EyeDropper) { - GiveMetheChild("#ad5049", 'Seu navegador não suporta a API Color Catcher') - return + GiveMetheChild("#ad5049", 'Seu navegador não suporta a API EyeDropper'); + return; } chrome.tabs.sendMessage( tabs[0].id, { from: "popup", query: "eye_dropper_clicked" } ); - window.close() - }) + window.close(); + }); - buttonCont.appendChild(button) + buttonCont.appendChild(button); } }); - - - chrome.storage.local.get("color_hex_code", (resp) => { - if (resp.color_hex_code && resp.color_hex_code.length > 0) { resp.color_hex_code.forEach(hexCode => { - const liElem = document.createElement("li") - liElem.innerText = hexCode - liElem.style.backgroundColor = hexCode - liElem.addEventListener("click", () => { - navigator.clipboard.writeText(hexCode); - GiveMetheChild("#e19526", "O código Hex foi copiado para a área de transferência!") - }) - resultList.appendChild(liElem) - }) + const liElem = document.createElement("li"); - const ClearButton = document.createElement("button") - ClearButton.innerText = "Limpar histórico" - ClearButton.setAttribute("id", "ClearButton") - ClearButton.addEventListener("click", () => { - chrome.storage.local.remove("color_hex_code") - window.close() - }) - mainCont.appendChild(ClearButton) - } + const colorPreview = document.createElement("div"); + colorPreview.classList.add("color-preview"); + colorPreview.style.backgroundColor = hexCode; // Define a cor com base no código HEX - }) + const colorText = document.createElement("span"); + colorText.innerText = hexCode; -}) + liElem.appendChild(colorPreview); + liElem.appendChild(colorText); + liElem.addEventListener("click", () => { + navigator.clipboard.writeText(hexCode).then(() => { + GiveMetheChild("#e19526", "O código HEX foi copiado para a área de transferência!"); + }).catch(err => { + console.error('Failed to copy:', err); + }); + }); + + resultList.appendChild(liElem); + }); + + const ClearButton = document.createElement("button"); + ClearButton.innerText = "Limpar histórico"; + ClearButton.setAttribute("id", "ClearButton"); + ClearButton.addEventListener("click", () => { + chrome.storage.local.remove("color_hex_code"); + window.close(); + }); + mainCont.appendChild(ClearButton); + } + }); +});