filtered list

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;
 	}