diff --git a/about.html b/about.html index 5480651..1126fd9 100644 --- a/about.html +++ b/about.html @@ -54,5 +54,38 @@ + diff --git a/categories.html b/categories.html index 080b7eb..5f4742b 100644 --- a/categories.html +++ b/categories.html @@ -145,5 +145,39 @@ + + diff --git a/images/Facebook.png b/images/Facebook.png new file mode 100644 index 0000000..64d5402 Binary files /dev/null and b/images/Facebook.png differ diff --git a/images/Instagram.png b/images/Instagram.png new file mode 100644 index 0000000..6be51fe Binary files /dev/null and b/images/Instagram.png differ diff --git a/images/Snapchat.png b/images/Snapchat.png new file mode 100644 index 0000000..02f0456 Binary files /dev/null and b/images/Snapchat.png differ diff --git a/images/Telegram.png b/images/Telegram.png new file mode 100644 index 0000000..c36fb03 Binary files /dev/null and b/images/Telegram.png differ diff --git a/images/TikTok.png b/images/TikTok.png new file mode 100644 index 0000000..2bf2104 Binary files /dev/null and b/images/TikTok.png differ diff --git a/images/WeChat.png b/images/WeChat.png new file mode 100644 index 0000000..180b67a Binary files /dev/null and b/images/WeChat.png differ diff --git a/images/Whatsapp.png b/images/Whatsapp.png new file mode 100644 index 0000000..f28aa61 Binary files /dev/null and b/images/Whatsapp.png differ diff --git a/images/Youtube.png b/images/Youtube.png new file mode 100644 index 0000000..973dee6 Binary files /dev/null and b/images/Youtube.png differ diff --git a/images/logo.svg b/images/logo.svg deleted file mode 100644 index 1df18ea..0000000 --- a/images/logo.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/popup.js b/popup.js index a2926c8..409a5f9 100644 --- a/popup.js +++ b/popup.js @@ -37,32 +37,53 @@ preferences.addEventListener("click", () => { const activate = document.getElementById("activate"); activate.addEventListener("click", async () => { activate.classList.toggle("active"); + let active = activate.classList.contains("active"); + console.log(active); let [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, function: highlightSelected, + args: [active], }); }); -function highlightSelected() { +function highlightSelected(active) { chrome.storage.sync.get(["categories", "selected"], (result) => { - for (category of result.selected) { - result.categories[category].keywords.forEach((keyword) => { - let findings = contains("p, span, li, h1, h2, h3, h4, h5, h6", keyword); - - if (findings.length) { - findings.forEach((finding) => (finding.style.color = "red")); - } - }); + for (const el of document.querySelectorAll("*")) { + el.style.visibility = active ? "hidden" : "visible"; + } + + if (active) { + for (category of result.selected) { + result.categories[category].keywords.forEach((keyword) => { + const body = document.querySelector("body"); + let findings = textNodesUnder(body).filter((text) => + text.textContent.includes(keyword) + ); + + if (findings.length) { + for (const finding of findings) { + let wrapped = document.createElement("span"); + wrapped.innerHTML = finding.textContent; + + wrapped.style.visibility = "visible"; + + let target = finding.parentElement; + target.replaceChild(wrapped, finding); + } + } + }); + } } }); - function contains(selector, text) { - var elements = document.querySelectorAll(selector); - return Array.prototype.filter.call(elements, function (element) { - return RegExp(text).test(element.textContent.toLowerCase()); - }); + function textNodesUnder(el) { + var n, + a = [], + walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false); + while ((n = walk.nextNode())) a.push(n); + return a; } } diff --git a/style.css b/style.css index 97168eb..e1a7183 100644 --- a/style.css +++ b/style.css @@ -319,6 +319,34 @@ input:checked + .slider:before { overflow: hidden; } +footer { + margin-top: 128px; + margin-bottom: 32px; + display: flex; + justify-content: center; +} + +.logo { + transition: all 0.2s ease; + display: inline-block; + width: 36px; + height: 36px; +} + +.logo + .logo { + margin-left: 24px; +} + +.logo img { + width: 100%; + height: 100%; + object-fit: contain; +} + +.logo:hover { + transform: scale(1.1); +} + @media (max-width: 991.98px) { html, body { diff --git a/tips.html b/tips.html index 4322875..17b0f28 100644 --- a/tips.html +++ b/tips.html @@ -98,5 +98,38 @@ +