Ucontrol/popup.js

// Sync the selected categories in the popup

chrome.storage.sync.get(["categories", "selected"], (result) => {
	let categories = result.categories;
	let selected = result.selected;
	listCategories(categories, selected);
});

const listCategories = function (categories, selected) {
	let selectedList = document.getElementById("selected-list");
	let reference = selectedList.querySelector(".category.reference");

	for (const [key, category] of Object.entries(categories)) {
		item = reference.cloneNode(true);
		item.classList.remove("reference");
		item.querySelector(".title").innerHTML = category.title;

		let checkbox = item.querySelector(".switch input");
		checkbox.checked = selected.includes(key);

		checkbox.addEventListener("change", () => {
			checkbox.checked ? selected.push(key) : selected.splice(selected.indexOf(key), 1);
			chrome.storage.sync.set({ selected });
		});

		selectedList.appendChild(item);
	}

	reference.remove();
};

const preferences = document.getElementById("preferences");
preferences.addEventListener("click", () => {
	chrome.runtime.openOptionsPage();
});

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(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" : "";
		}

		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";
							wrapped.style.backgroundColor = "#1834e9";
							wrapped.style.color = "white";

							let target = finding.parentElement;
							target.replaceChild(wrapped, finding);

							// wrapped.style.display = "";
							// let upper = target;
							// while (upper.parentElement) {
							// 	upper.style.display = "";
							// 	upper = upper.parentElement;
							// }
						}
					}
				});
			}
		}
	});

	function textNodesUnder(el) {
		var n,
			a = [],
			walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
		while ((n = walk.nextNode())) a.push(n);
		return a;
	}
}