diff --git a/popup.js b/popup.js index ba71d06..42d7c17 100644 --- a/popup.js +++ b/popup.js @@ -3,6 +3,7 @@ chrome.storage.sync.get(["categories", "selected"], (result) => { let categories = result.categories; let selected = result.selected; + listCategories(categories, selected); }); @@ -38,7 +39,6 @@ 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 }); @@ -51,33 +51,63 @@ activate.addEventListener("click", async () => { function highlightSelected(active) { chrome.storage.sync.get(["categories", "selected"], (result) => { - for (const el of document.querySelectorAll("*:not(html, body)")) { - el.style.visibility = active ? "hidden" : "visible"; - el.style.backgroundColor = ""; - el.style.color = ""; - // el.style.height = "0px"; - // el.style.display = active ? "none" : ""; + let previousContainer = document.querySelector("#UcontrolFiltered"); + if (previousContainer) previousContainer.remove(); + for (const el of document.querySelectorAll( + "*:not(html, body, head, script, meta, style, noscript, link)" + )) { + el.style.display = active ? "none" : ""; + + // el.style.visibility = active ? "hidden" : "visible"; + // el.style.backgroundColor = ""; + // el.style.color = ""; } if (active) { + let container = document.createElement("div"); + container.id = "UcontrolFiltered"; + container.style.position = "absolute"; + container.style.top = 0; + container.style.left = 0; + container.style.padding = "32px"; + container.style.fontSize = "24px"; + container.style.lineHeight = 1.6; + + let marker = document.createElement("span"); + marker.style.display = "inline-block"; + marker.style.backgroundColor = "#1834e9"; + marker.style.width = "0.5em"; + marker.style.height = "0.5em"; + marker.style.marginRight = "0.5ch"; + marker.style.verticalAlign = "middle"; + for (category of result.selected) { result.categories[category].keywords.forEach((keyword) => { - const body = document.querySelector("body"); - let findings = textNodesUnder(body).filter((text) => + let findings = textNodesUnder(document.body).filter((text) => text.textContent.includes(keyword) ); if (findings.length) { for (const finding of findings) { - let wrapped = document.createElement("span"); - wrapped.innerHTML = finding.textContent; + if (!container.textContent.includes(finding.textContent)) { + let wrapped = document.createElement("div"); + wrapped.style.marginBottom = "16px"; + wrapped.innerHTML = finding.textContent; + + wrapped.prepend(marker.cloneNode()); + + container.appendChild(wrapped); + } + // v1 - wrapped.style.visibility = "visible"; - wrapped.style.backgroundColor = "#1834e9"; - wrapped.style.color = "white"; + // wrapped.style.visibility = "visible"; + // wrapped.style.backgroundColor = "#1834e9"; + // wrapped.style.color = "white"; - let target = finding.parentElement; - target.replaceChild(wrapped, finding); + // let target = finding.parentElement; + // target.replaceChild(wrapped, finding); + + // v0 // wrapped.style.display = ""; // let upper = target; @@ -86,16 +116,30 @@ function highlightSelected(active) { // upper = upper.parentElement; // } } + document.body.appendChild(container); } }); } } }); + var rejectScriptTextFilter = { + acceptNode: function (node) { + if (node.parentNode.nodeName !== "SCRIPT") { + return NodeFilter.FILTER_ACCEPT; + } + }, + }; + function textNodesUnder(el) { var n, a = [], - walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false); + walk = document.createTreeWalker( + el, + NodeFilter.SHOW_TEXT, + rejectScriptTextFilter, + false + ); while ((n = walk.nextNode())) a.push(n); return a; }