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");

	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) => {
		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" : "";
		}

		if (active) {
			let container = document.createElement("div");
			container.id = "UcontrolFiltered";

			container.style.padding = "32px";
			container.style.fontSize = "36px";
			container.style.lineHeight = 1.6;
			container.style.maxWidth = "65ch";

			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) => {
					let findings = textNodesUnder(document.body).filter((text) =>
						text.textContent.includes(keyword)
					);

					if (findings.length) {
						for (const finding of findings) {
							if (!container.textContent.includes(finding.textContent)) {
								let wrapped = document.createElement("div");
								wrapped.style.marginBottom = "16px";
								wrapped.innerHTML = finding.textContent
									.replace(/^[\W_]+/g, "")
									.replace("we may", highlight("we may"))
									.replace("We may", highlight("We may"))
									.replace("your rights", highlight("your rights"))
									.replace("rights", highlight("rights"));

								wrapped.prepend(marker.cloneNode());

								container.appendChild(wrapped);
							}
						}
						document.body.appendChild(container);
					}
				});
			}
		}
	});

	var highlight = function (text) {
		let stroke = document.createElement("span");
		stroke.style.color = "white";
		stroke.style.backgroundColor = "#1834e9";
		stroke.style.padding = "0 4px";
		stroke.innerHTML = text;
		return stroke.outerHTML;
	};

	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,
				rejectScriptTextFilter,
				false
			);
		while ((n = walk.nextNode())) a.push(n);
		return a;
	}
}