From e7e73b3460bc10a53d0e3bebd250d85a16016da2 Mon Sep 17 00:00:00 2001 From: Francesco Luzzana Date: Thu, 19 May 2022 01:28:07 +0200 Subject: [PATCH] options page and selector --- background.js | 2 +- manifest.json | 3 ++- options.html | 21 +++++++++++++++++++++ options.js | 40 ++++++++++++++++++++++++++++++++++++++++ popup.css | 43 +++++++++++++++++++++++++------------------ popup.html | 1 + popup.js | 12 +++++++++--- 7 files changed, 99 insertions(+), 23 deletions(-) create mode 100644 options.html create mode 100644 options.js diff --git a/background.js b/background.js index 460837a..69418af 100644 --- 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 }); diff --git a/manifest.json b/manifest.json index b09a6e8..0ab0a32 100644 --- 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" diff --git a/options.html b/options.html new file mode 100644 index 0000000..abae016 --- /dev/null +++ b/options.html @@ -0,0 +1,21 @@ + + + + + + + Parse Policies - Options + + + + +

Parse Policies - Options

+ + + + diff --git a/options.js b/options.js new file mode 100644 index 0000000..48f9f54 --- /dev/null +++ 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); + } +} diff --git a/popup.css b/popup.css index 6230bdb..a4f8164 100644 --- a/popup.css +++ b/popup.css @@ -1,33 +1,40 @@ body { - width: 200px; + width: 200px; } button { - height: 30px; - width: 30px; - outline: none; - border-radius: 2px; - cursor: pointer; - border: 1px solid currentColor; - + height: 30px; + width: 30px; + outline: none; + border-radius: 2px; + cursor: pointer; + border: 1px solid currentColor; } button:active { - background-color: currentColor; + background-color: currentColor; } 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 { - font-size: 1rem; - margin: 8px 0; +h1, +h2 { + font-size: 1rem; + margin: 8px 0; } ul { - margin: 0; - padding: 0; - list-style: none; -} \ No newline at end of file + margin: 0; + padding: 0; + list-style: none; +} + +#preferences { + background: none; + padding: 0; + margin: 8px 0; + border: none; + border-bottom: 1px solid currentColor; +} diff --git a/popup.html b/popup.html index 0038405..198bd60 100644 --- a/popup.html +++ b/popup.html @@ -10,6 +10,7 @@

Selected categories

+
diff --git a/popup.js b/popup.js index 30a5229..3ce10db 100644 --- 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()); }); } }