options page and selector

master
km0 3 years ago
parent b8252e54b1
commit e7e73b3460

@ -25,7 +25,7 @@ let categories = {
}, },
}; };
let selected = ["collect", "third", "location"]; let selected = ["location"];
chrome.runtime.onInstalled.addListener(() => { chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ selected, categories }); chrome.storage.sync.set({ selected, categories });

@ -1,7 +1,8 @@
{ {
"name": "Parse Policies", "name": "Parse Policies",
"description": "An extension to parse privacy policies", "description": "An extension to parse privacy policies",
"version": "0.1", "version": "1.0",
"options_page": "options.html",
"manifest_version": 3, "manifest_version": 3,
"background": { "background": {
"service_worker": "background.js" "service_worker": "background.js"

@ -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>

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

@ -1,33 +1,40 @@
body { body {
width: 200px; width: 200px;
} }
button { button {
height: 30px; height: 30px;
width: 30px; width: 30px;
outline: none; outline: none;
border-radius: 2px; border-radius: 2px;
cursor: pointer; cursor: pointer;
border: 1px solid currentColor; border: 1px solid currentColor;
} }
button:active { button:active {
background-color: currentColor; background-color: currentColor;
} }
button.current { button.current {
box-shadow: 0 0 0 2px white, box-shadow: 0 0 0 2px white, 0 0 0 4px black;
0 0 0 4px black;
} }
h1, h2 { h1,
font-size: 1rem; h2 {
margin: 8px 0; font-size: 1rem;
margin: 8px 0;
} }
ul { ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
}
#preferences {
background: none;
padding: 0;
margin: 8px 0;
border: none;
border-bottom: 1px solid currentColor;
} }

@ -10,6 +10,7 @@
<div> <div>
<h2>Selected categories</h2> <h2>Selected categories</h2>
<ul id="selected-list"></ul> <ul id="selected-list"></ul>
<button id="preferences">Preferences</button>
</div> </div>
</body> </body>
</html> </html>

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

Loading…
Cancel
Save