options page and selector

3 years ago · e7e73b3460
parent b8252e54b1
commit e7e73b3460
7 changed files with 99 additions and 23 deletions
--- a/background.js
+++ b/background.js
@ -25,7 +25,7 @@ let categories = {
 	},
 };

-let selected = ["collect", "third", "location"];
+let selected = ["location"];

 chrome.runtime.onInstalled.addListener(() => {
 	chrome.storage.sync.set({ selected, categories });
--- a/manifest.json
+++ b/manifest.json
@ -1,7 +1,8 @@
 {
    "name": "Parse Policies",
    "description": "An extension to parse privacy policies",
-    "version": "0.1",
+    "version": "1.0",
+    "options_page": "options.html",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
--- a/options.html
+++ b/options.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Parse Policies - Options</title>
+		<link rel="stylesheet" href="options.css" />
+        <script src="options.js" defer></script>
+	</head>
+	<body>
+		<h1>Parse Policies - Options</h1>
+			<ul id="categories">
+				<li class="category reference">
+					<label for=""></label>
+					<input type="checkbox" name="" id="" />
+				</li>
+			</ul>
+		</div>
+	</body>
+</html>
--- a/options.js
+++ b/options.js
@ -0,0 +1,40 @@
+chrome.storage.sync.get(["categories", "selected"], (result) => {
+	listAllCategories(result.categories, result.selected);
+});
+
+function listAllCategories(categories, selected) {
+	const list = document.querySelector("#categories");
+	let reference = list.querySelector(".reference");
+	for (const category in categories) {
+		let item = reference.cloneNode(true);
+		item.classList.remove("reference");
+
+		let label = item.querySelector("label");
+
+		label.innerHTML = categories[category].title;
+		label.setAttribute("for", category);
+
+		let checkbox = item.querySelector("input");
+		checkbox.checked = selected.includes(category);
+		checkbox.setAttribute("name", category);
+
+		checkbox.addEventListener("change", () => {
+			checkbox.checked
+				? selected.push(category)
+				: selected.splice(selected.indexOf(category), 1);
+			chrome.storage.sync.set({ selected });
+		});
+
+		list.appendChild(item);
+	}
+}
+
+function addOrRemove(array, value) {
+	var index = array.indexOf(value);
+
+	if (index === -1) {
+		array.push(value);
+	} else {
+		array.splice(index, 1);
+	}
+}
--- a/popup.css
+++ b/popup.css
@ -9,7 +9,6 @@ button {
 	border-radius: 2px;
 	cursor: pointer;
 	border: 1px solid currentColor;
-
 }

 button:active {
@ -17,11 +16,11 @@ button:active {
 }

 button.current {
-    box-shadow: 0 0 0 2px white,
-        0 0 0 4px black;
+	box-shadow: 0 0 0 2px white, 0 0 0 4px black;
 }

-h1, h2 {
+h1,
+h2 {
 	font-size: 1rem;
 	margin: 8px 0;
 }
@ -31,3 +30,11 @@ ul {
 	padding: 0;
 	list-style: none;
 }
+
+#preferences {
+	background: none;
+	padding: 0;
+	margin: 8px 0;
+	border: none;
+	border-bottom: 1px solid currentColor;
+}
--- a/popup.html
+++ b/popup.html
@ -10,6 +10,7 @@
 		<div>
 			<h2>Selected categories</h2>
 			<ul id="selected-list"></ul>
+			<button id="preferences">Preferences</button>
 		</div>
 	</body>
 </html>
--- a/popup.js
+++ b/popup.js
@ -15,6 +15,11 @@ const listCategories = function (categories, selected) {
 	}
 };

+const preferences = document.getElementById("preferences");
+preferences.addEventListener("click", () => {
+	chrome.runtime.openOptionsPage();
+});
+
 const activate = document.getElementById("activate");
 activate.addEventListener("click", async () => {
 	let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
@ -29,9 +34,10 @@ function highlightSelected() {
 	chrome.storage.sync.get(["categories", "selected"], (result) => {
 		for (category of result.selected) {
 			result.categories[category].keywords.forEach((keyword) => {
-				let findings = contains("*", keyword);
+				let findings = contains("p, span, li, h1, h2, h3, h4, h5, h6", keyword);
+
 				if (findings.length) {
-					console.log(findings);
+					findings.forEach((finding) => (finding.style.color = "red"));
 				}
 			});
 		}
@ -40,7 +46,7 @@ function highlightSelected() {
 	function contains(selector, text) {
 		var elements = document.querySelectorAll(selector);
 		return Array.prototype.filter.call(elements, function (element) {
-			return RegExp(text).test(element.textContent);
+			return RegExp(text).test(element.textContent.toLowerCase());
 		});
 	}
 }