15 |
31 |
16 |
22 | __MSG_scopePage__
17 | __MSG_scopeSite__
18 | __MSG_scopeDomain__
19 | __MSG_scopeGlobal__
20 |
21 |
23 |
29 |
30 | __MSG_policyBlockAll__
24 | __MSG_policyFiltered__
25 | __MSG_policyRelaxed__
26 | __MSG_policyAllowAll__
27 |
28 |
32 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/popup.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | /**
4 | * @var jaegerhut [Object] Badge icons, one for each policy
5 | */
6 | const jaegerhut = {
7 | 0: {
8 | name: "allowall",
9 | colour: "#D84A4A",
10 | text: chrome.i18n.getMessage("policyAllowAll")
11 | },
12 | 1: {
13 | name: "relaxed",
14 | colour: "#559FE6",
15 | text: chrome.i18n.getMessage("policyRelaxed")
16 | },
17 | 2: {
18 | name: "filtered",
19 | colour: "#73AB55",
20 | text: chrome.i18n.getMessage("policyFiltered")
21 | },
22 | 3: {
23 | name: "blockall",
24 | colour: "#26272A",
25 | text: chrome.i18n.getMessage("policyBlockAll")
26 | },
27 | undefined: {
28 | name: "undefined",
29 | colour: "#6F7072"
30 | }
31 | };
32 |
33 | /**
34 | * @var tabInfo [Object] Holds data about the tab
35 | * obtained from the background process
36 | */
37 | let tabInfo = {};
38 |
39 | /**
40 | * @var port [Object] A connection Port that allows message exchanging
41 | */
42 | let port;
43 |
44 | /*
45 | * Basic nodes for building the interface
46 | */
47 | const nodeHost = document.createElement("div");
48 | const nodeCheckbox = document.createElement("input");
49 | const nodeDetails = document.createElement("label");
50 | const nodeWebsocket = document.createElement("div");
51 | const nodeFrames = document.createElement("div");
52 | const nodeSubdomain = document.createElement("span");
53 | const nodeDomain = document.createElement("span");
54 | const nodeNumber = document.createElement("label");
55 | const nodeResource = document.createElement("a");
56 | const nodeHostsList = document.createElement("div");
57 |
58 | nodeHost.className = "host blocked";
59 | nodeDetails.className = "details";
60 | nodeWebsocket.className = "websocket";
61 | nodeFrames.className = "frames";
62 | nodeSubdomain.className = "subdomain";
63 | nodeDomain.className = "domain";
64 | nodeNumber.className = "number";
65 | nodeResource.className = "resource";
66 | nodeHostsList.className = "hosts";
67 |
68 | nodeHostsList.id = "f0";
69 |
70 | nodeCheckbox.type = "checkbox";
71 |
72 | nodeNumber.title = chrome.i18n.getMessage("seeResources");
73 |
74 | nodeResource.target = "_blank";
75 |
76 | /**
77 | * @brief Set and save an exception rule for that script
78 | *
79 | * Fired whenever the user changes the checkbox of a rule.
80 | * This will set and save the rule according to what the
81 | * user has chosen.
82 | *
83 | * @param e [Event] Event interface on the checkbox change event
84 | */
85 | function setScriptRule(e) {
86 | const input = e.target;
87 |
88 | let info = tabInfo;
89 | const frameID = parseInt(input.dataset.frameid, 10);
90 |
91 | if (frameID > 0) {
92 | info = tabInfo.frames[frameID];
93 | }
94 |
95 | const msg = {
96 | type: 0,
97 | private: tabInfo.private,
98 | site: [],
99 | rule: {}
100 | };
101 |
102 | switch (parseInt(document.getElementById("settings").dataset.scope, 10)) {
103 | // page
104 | case 3: msg.site[2] = info.page;
105 | // site - fallthrough
106 | case 2: msg.site[1] = info.subdomain;
107 | // domain - fallthrough
108 | case 1: msg.site[0] = info.domain;
109 | // global - fallthrough
110 | default:
111 | }
112 |
113 | const domain = input.dataset.domain;
114 | const subdomain = input.dataset.subdomain;
115 |
116 | msg.rule[domain] = {
117 | rule: null,
118 | urls: {}
119 | };
120 |
121 | msg.rule[domain].urls[subdomain] = {
122 | // in the DOM true means checked which means allow
123 | // in the settings true means block
124 | rule: !input.checked,
125 | urls: {}
126 | };
127 |
128 | // The background script deals with it because the popup process will die on close
129 | port.postMessage(msg);
130 | }
131 |
132 | /**
133 | * @brief Open dropdown to choose frame policy
134 | *
135 | * Opens an overlay div to choose a new policy for a frame.
136 | * This is fired when clicking on a hat (Jaegerhut)
137 | *
138 | * @param e [Event] Event interface on the clicked Jaegerhut
139 | */
140 | function openFramePolicy(e) {
141 | const frameid = e.target.parentNode.dataset.frameid;
142 | const policy = parseInt(e.target.dataset.policy, 10);
143 | const dropdown = document.getElementById("frame-edit");
144 | const pos = e.target.getBoundingClientRect().y - 30;
145 |
146 | dropdown.dataset.frameid = frameid;
147 | dropdown.dataset.hidden = false;
148 | dropdown.style = `top:${pos}px`;
149 |
150 | dropdown.dataset.scope = 1;
151 | dropdown.dataset.policy = policy;
152 | }
153 |
154 | /**
155 | * @brief Close frame policy dropdown
156 | *
157 | * Closes the overlay div where you choose a new policy for a frame.
158 | */
159 | function closeFramePolicy() {
160 | document.getElementById("frame-edit").dataset.hidden = true;
161 | }
162 |
163 | /**
164 | * @brief Build resource list in the DOM
165 | *
166 | * Injects nodes to display the list of resources that the page
167 | * contains. Also attaches events to the elements to allow
168 | * manipulation of the settings.
169 | *
170 | * @param frameid [Number] id of the frame being built
171 | */
172 | function buildList(frameID) {
173 | const elemMainNode = document.getElementById(`f${frameID}`);
174 | let frame = tabInfo;
175 |
176 | if (frameID > 0) {
177 | frame = tabInfo.frames[frameID];
178 | }
179 |
180 | Object.entries(frame.scripts).sort().forEach((domainData) => {
181 | const domain = domainData[0];
182 |
183 | Object.entries(domainData[1]).sort().forEach((subdomainData) => {
184 | const subdomain = subdomainData[0];
185 | const resources = subdomainData[1];
186 |
187 | const elemHost = nodeHost.cloneNode(false);
188 | const elemCheckbox = nodeCheckbox.cloneNode(false);
189 | const elemDetails = nodeDetails.cloneNode(false);
190 | const elemWebsocket = nodeWebsocket.cloneNode(false);
191 | const elemFrames = nodeFrames.cloneNode(false);
192 | const elemSubdomain = nodeSubdomain.cloneNode(false);
193 | const elemDomain = nodeDomain.cloneNode(false);
194 | const elemNumber = nodeNumber.cloneNode(false);
195 |
196 | elemDetails.appendChild(elemWebsocket);
197 | elemDetails.appendChild(elemFrames);
198 | elemDetails.appendChild(elemSubdomain);
199 | elemDetails.appendChild(elemDomain);
200 | elemHost.appendChild(elemCheckbox);
201 | elemHost.appendChild(elemDetails);
202 | elemHost.appendChild(elemNumber);
203 | elemMainNode.appendChild(elemHost);
204 |
205 | const hostID = `${subdomain}${domain}${frameID}`;
206 |
207 | elemCheckbox.id = hostID;
208 | elemDetails.htmlFor = hostID;
209 |
210 | elemSubdomain.innerHTML = `${subdomain}${((subdomain.length > 0) ? "." : "")}`;
211 | elemDomain.innerHTML = `${domain}`;
212 | elemNumber.innerText = resources.length;
213 |
214 | // if the text is larger than the area, we display a tooltip
215 | if (elemSubdomain.scrollWidth > elemSubdomain.clientWidth || elemDomain.scrollWidth > elemDomain.clientWidth) {
216 | elemHost.title = `${elemSubdomain.textContent}${domain}`;
217 | }
218 |
219 | // save script exception
220 | elemCheckbox.addEventListener("change", setScriptRule, false);
221 | // add data to checkbox
222 | elemCheckbox.dataset.frameid = frameID;
223 | elemCheckbox.dataset.domain = domain;
224 | elemCheckbox.dataset.subdomain = subdomain;
225 |
226 | // input that controls the script list visibility
227 | const openList = nodeCheckbox.cloneNode(false);
228 | openList.id = `list_${hostID}`;
229 | elemNumber.htmlFor = `list_${hostID}`;
230 | elemMainNode.appendChild(openList);
231 |
232 | // element that holds the list of elements from that host
233 | const resourcesList = document.createElement("div");
234 | resourcesList.className = "resources";
235 | elemMainNode.appendChild(resourcesList);
236 |
237 | let frames = 0;
238 | let websockets = 0;
239 |
240 | // populate scripts list
241 | // script can be a websocket or frame
242 | resources.forEach((script) => {
243 | if (!script.blocked) {
244 | elemCheckbox.checked = true;
245 | // remove blocked class
246 | elemHost.className = "host";
247 | }
248 |
249 | const url = `${script.protocol}${elemSubdomain.textContent}${domain}${script.name}${script.query}`;
250 | const elemResource = nodeResource.cloneNode(false);
251 | elemResource.innerText = script.name.match(/[^/]*.$/);
252 | elemResource.title = url;
253 | elemResource.href = url;
254 |
255 | // websocket
256 | if (script.protocol === "wss://" || script.protocol === "ws://") {
257 | elemResource.className = "resource haswebsocket";
258 | elemWebsocket.className = "websocket haswebsocket";
259 | elemWebsocket.title = `\n${chrome.i18n.getMessage("tooltipWebsockets", (++websockets).toString())}`;
260 | }
261 |
262 | // if frameid exists it's a frame
263 | // otherwise it's a normal script/websocket
264 | if (script.frameid === undefined) {
265 | resourcesList.appendChild(elemResource);
266 | }
267 | else {
268 | const policy = jaegerhut[tabInfo.frames[script.frameid].policy];
269 | const elemFrameDiv = document.createElement("div");
270 | elemFrameDiv.className = "frame";
271 | elemFrameDiv.dataset.frameid = script.frameid;
272 |
273 | elemFrames.className = "frames hasframe";
274 | elemFrames.title = chrome.i18n.getMessage("tooltipFrames", (++frames).toString());
275 |
276 | const elemPolicy = document.createElement("img");
277 | elemPolicy.src = `/images/${policy.name}38.png`;
278 | elemPolicy.className = "frame-policy";
279 | elemPolicy.title = policy.text;
280 | elemPolicy.dataset.policy = tabInfo.frames[script.frameid].policy;
281 | elemPolicy.addEventListener("click", openFramePolicy);
282 |
283 | const elemNumberFrame = nodeNumber.cloneNode(false);
284 | elemNumberFrame.htmlFor = `frame${script.frameid}`;
285 | elemNumberFrame.innerText = Object.keys(tabInfo.frames[script.frameid].scripts).length;
286 |
287 | elemFrameDiv.appendChild(elemPolicy);
288 | elemFrameDiv.appendChild(elemResource);
289 | elemFrameDiv.appendChild(elemNumberFrame);
290 | resourcesList.appendChild(elemFrameDiv);
291 |
292 | const elemCheckboxFrame = nodeCheckbox.cloneNode(false);
293 | elemCheckboxFrame.id = `frame${script.frameid}`;
294 | resourcesList.appendChild(elemCheckboxFrame);
295 |
296 | const resourcesListFrame = document.createElement("div");
297 | resourcesListFrame.className = `resources ${policy.name}`;
298 | resourcesListFrame.id = `f${script.frameid}`;
299 | resourcesList.appendChild(resourcesListFrame);
300 |
301 | buildList(script.frameid);
302 | }
303 |
304 | elemFrames.title = `${elemFrames.title}${elemWebsocket.title}`;
305 | });
306 | });
307 | });
308 | }
309 |
310 | /**
311 | * @brief Sets and build the popup UI
312 | *
313 | * Define main classes and then call the script list builder.
314 | */
315 | function startUI() {
316 | const error = document.getElementById("error");
317 | const settings = document.getElementById("settings");
318 |
319 | settings.replaceChild(nodeHostsList.cloneNode(false), document.getElementById("f0"));
320 | settings.removeAttribute("hidden");
321 | error.hidden = true;
322 |
323 | const blocked = tabInfo.policy ? tabInfo.allowonce ? "(T) " : `(${tabInfo.blocked}) ` : "";
324 |
325 | document.title = `${blocked}ScriptJäger`;
326 | document.getElementById("jaegerhut").href = `images/${jaegerhut[tabInfo.policy].name}38.png`;
327 | document.getElementById("jaegerfarbe").content = jaegerhut[tabInfo.policy].colour;
328 |
329 | let skip = false;
330 |
331 | switch (tabInfo.protocol) {
332 | case "https://":
333 | case "http://":
334 | break;
335 | case "chrome://":
336 | case "chrome-extension://":
337 | skip = "errorInternal";
338 | break;
339 | case "file://":
340 | if (!tabInfo.policy) {
341 | skip = "errorFile";
342 | }
343 | break;
344 | default:
345 | skip = "errorInternal";
346 | }
347 |
348 | document.body.className = jaegerhut[tabInfo.policy].name;
349 |
350 | if (skip !== false) {
351 | error.innerText = chrome.i18n.getMessage(skip);
352 | error.removeAttribute("hidden");
353 | settings.hidden = true;
354 | return;
355 | }
356 |
357 | // policy button reflects current policy
358 | settings.dataset.policy = tabInfo.policy;
359 |
360 | const allowonce = document.getElementById("allowonce");
361 |
362 | // Allow once is turned on
363 | if (tabInfo.allowonce === true) {
364 | allowonce.title = chrome.i18n.getMessage("policyAllowOnceDisable");
365 | allowonce.className = "allowonce";
366 | }
367 | // Allow once is turned off
368 | else {
369 | allowonce.title = chrome.i18n.getMessage("policyAllowOnce");
370 | allowonce.className = "";
371 | }
372 |
373 | buildList(0);
374 | }
375 |
376 | /**
377 | * @brief Get info about tab
378 | *
379 | * When opening the popup we request the info about the
380 | * page scripts and create the DOM nodes with this info
381 | *
382 | * @param tabs [Array] Contains info about the current tab
383 | */
384 | chrome.tabs.query({currentWindow: true, active: true}, (tabs) => {
385 | port = chrome.runtime.connect({name: tabs[0].id.toString(10)});
386 |
387 | /**
388 | * @brief Perform actions acording to message
389 | *
390 | * The background script will send the info we need
391 | *
392 | * Child 'type' will contain the type of the request
393 | *
394 | * @param msg [Object] Contains type and data for the action
395 | *
396 | * @note Each request has different msg children/info
397 | *
398 | * 0 (Re)Build UI - Whenever the UI has to be completely updated
399 | * - data [Object] Tab info, a children of background tabStorage
400 | *
401 | * 1 Update interface
402 | *
403 | * 2 Response of allowed/blocked list for relaxed/filtered
404 | * - tabid [Number] id of the requested tab
405 | * - scripts [Array] Contains the url and the rule
406 | * - name [String] DOM ID of the script
407 | * - blocked [Boolean] Whether that level will be blocked
408 | */
409 | port.onMessage.addListener((msg) => {
410 | console.log(msg);
411 |
412 | if (msg.type === 0) {
413 | // save tab info in variable
414 | tabInfo = msg.data;
415 | startUI();
416 | return;
417 | }
418 |
419 | if (msg.type === 1) {
420 | return;
421 | }
422 |
423 | // msg.type === 2
424 | // check if the user has not changed tab
425 | if (msg.tabid === tabInfo.tabid) {
426 | msg.scripts.forEach((domain) => {
427 | document.getElementById(domain.name).checked = !domain.blocked;
428 | });
429 | }
430 | });
431 | });
432 |
433 | /**
434 | * @brief Save new policy
435 | *
436 | * Send to background process to save new policy for the specific scope
437 | *
438 | * @param policy [Number] Policy to save
439 | * @param scope [Number] Where to change rule, e.g. domain, global
440 | * @param frameid [Number] Frame where the policy change is being done
441 | */
442 | function changePolicy(policy, scope, frameid) {
443 | const msg = {
444 | type: 0,
445 | private: tabInfo.private,
446 | site: [],
447 | rule: policy
448 | };
449 |
450 | let frame = tabInfo;
451 |
452 | if (frameid > 0) {
453 | frame = tabInfo.frames[frameid];
454 | }
455 |
456 | switch (scope) {
457 | // page
458 | case 3: msg.site[2] = frame.page;
459 | // site - fallthrough
460 | case 2: msg.site[1] = frame.subdomain;
461 | // domain - fallthrough
462 | case 1: msg.site[0] = frame.domain;
463 | // global - fallthrough
464 | default:
465 | }
466 |
467 | port.postMessage(msg);
468 | }
469 |
470 | /**
471 | * @brief Enable listeners when the DOM has loaded
472 | *
473 | * When the DOM is loaded we can attach the events to manipulate
474 | * the preferences.
475 | */
476 | function enableListeners() {
477 | document.getElementById("settings").addEventListener("click", closeFramePolicy, true);
478 |
479 | document.getElementById("cancel").addEventListener("click", closeFramePolicy);
480 |
481 | document.getElementById("preferences").addEventListener("click", (e) => {
482 | e.stopPropagation();
483 | chrome.runtime.openOptionsPage();
484 | });
485 |
486 | // allow once
487 | document.getElementById("allowonce").addEventListener("click", (e) => {
488 | e.stopPropagation();
489 | port.postMessage({
490 | type: 1,
491 | tabId: tabInfo.tabid,
492 | allow: !tabInfo.allowonce
493 | });
494 | });
495 |
496 | document.querySelectorAll(".scopes").forEach((scopes) => {
497 | scopes.addEventListener("click", (e) => {
498 | e.target.parentNode.parentNode.dataset.scope = e.target.dataset.value;
499 | });
500 | });
501 |
502 | document.querySelectorAll(".policies").forEach((policies) => {
503 | policies.addEventListener("click", (e) => {
504 | const target = (e.target.tagName === "IMG") ? e.target.parentNode : e.target;
505 |
506 | const frame = target.parentNode.parentNode.dataset;
507 | const policy = parseInt(target.dataset.value, 10);
508 | const scope = parseInt(frame.scope, 10);
509 |
510 | frame.policy = policy;
511 |
512 | changePolicy(policy, scope, frame.frameid);
513 |
514 | if (frame.frameid > 0) {
515 | document.getElementById(`f${frame.frameid}`).className = `resources ${jaegerhut[frame.policy].name}`;
516 | } else {
517 | document.body.className = jaegerhut[frame.policy].name;
518 | }
519 |
520 | // change all inputs to checked (allowed) or unchecked (blocked)
521 | if (policy === 0 || policy === 3) {
522 | document.querySelectorAll(`#f${frame.frameid} > .script > input`).forEach((checkbox) => {
523 | checkbox.checked = !policy;
524 | });
525 |
526 | return;
527 | }
528 |
529 | // request list of blocked and allowed scripts from background script
530 | port.postMessage({
531 | type: 2,
532 | policy: policy,
533 | tabid: tabInfo.tabid,
534 | frameid: frame.frameid,
535 | window: tabInfo.window,
536 | });
537 | });
538 | });
539 | }
540 |
541 | /**
542 | * @brief Translate and attach events
543 | *
544 | * This will translate the page and attach the events to the nodes.
545 | */
546 | document.addEventListener("DOMContentLoaded", () => {
547 | const template = document.body.innerHTML;
548 |
549 | // translate the page
550 | document.body.innerHTML = template.replace(/__MSG_(\w+)__/g, (a, b) => {
551 | return chrome.i18n.getMessage(b);
552 | });
553 |
554 | // allow resizable width on webpanel
555 | if (document.location.search === "?webpanel") {
556 | document.body.style = "width: 100%";
557 | }
558 |
559 | enableListeners();
560 | });
561 |
--------------------------------------------------------------------------------
/prefs.css:
--------------------------------------------------------------------------------
1 | html {
2 | background: var(--colorBg);
3 | }
4 | body {
5 | color: var(--colorFg);
6 | margin: 0 80px 50px;
7 | }
8 | h1,
9 | h2,
10 | h3,
11 | p,
12 | span:not(.site) {
13 | cursor: default;
14 | }
15 | h1 {
16 | margin-left: -20px;
17 | border-bottom: 1px solid var(--colorBorder);
18 | padding-bottom: .2em;
19 | }
20 | body,
21 | h2,
22 | .by {
23 | font-size: 13px;
24 | }
25 | .by {
26 | margin-left: .5em;
27 | }
28 | .logo {
29 | vertical-align: bottom;
30 | height: 35px;
31 | margin-right: 7px;
32 | }
33 | .github {
34 | display: inline-block;
35 | float: right;
36 | height: 35px;
37 | margin-top: 5px;
38 | }
39 | .github img {
40 | height: 60%;
41 | margin-left: 5px;
42 | }
43 | input[type=radio] {
44 | background-color: var(--colorBgIntense);
45 | border: 1px solid var(--colorBorder);
46 | border-radius: var(--radiusRound);
47 | box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
48 | position: relative;
49 | margin: 0 10px 4px 0;
50 | outline: none;
51 | height: 16px;
52 | width: 16px;
53 | -webkit-appearance: none;
54 | vertical-align: middle;
55 | }
56 | input[type=radio]:focus, input[type=checkbox]:focus {
57 | border-color: var(--colorBorderHighlight);
58 | box-shadow: 0 0 0 1px var(--colorBorderHighlight);
59 | }
60 | input[type=radio]:checked::before {
61 | content: "";
62 | position: absolute;
63 | background-color: var(--colorHighlightBg);
64 | border-radius: var(--radiusRound);
65 | top: 3px;
66 | left: 3px;
67 | right: 3px;
68 | bottom: 3px;
69 | }
70 | input[type=checkbox] {
71 | background-color: var(--colorBgIntense);
72 | border: 1px solid var(--colorBorder);
73 | border-radius: calc(var(--radius) * 0.33);
74 | box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
75 | position: relative;
76 | margin: 0 10px 4px 0;
77 | outline: none;
78 | height: 16px;
79 | width: 16px;
80 | -webkit-appearance: none;
81 | vertical-align: middle;
82 | }
83 | input[type=checkbox]:before,
84 | input[type=checkbox]:after {
85 | content: '';
86 | position: absolute;
87 | top: 0;
88 | left: 0;
89 | right: 0;
90 | bottom: 0;
91 | background-color: var(--colorHighlightBg);
92 | transform-origin: 0 0;
93 | transition: transform 0ms linear 0ms;
94 | }
95 | input[type=checkbox]:before {
96 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0);
97 | }
98 | input[type=checkbox]:after {
99 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0);
100 | transition-delay: 0ms;
101 | }
102 | input[type=checkbox]:indeterminate:before {
103 | transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25);
104 | transition-duration: 33.33333333ms;
105 | }
106 | input[type=checkbox]:checked:before {
107 | transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4);
108 | transition-duration: 33.33333333ms;
109 | }
110 | input[type=checkbox]:checked:after {
111 | transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2);
112 | transition-duration: 100ms;
113 | transition-delay: 33.33333333ms;
114 | }
115 | input[type=checkbox]:disabled {
116 | background-color: var(--colorBgDark);
117 | border-color: var(--colorDisabled);
118 | }
119 | input[type=checkbox]:disabled:before,
120 | input[type=checkbox]:disabled:after {
121 | background-color: var(--colorDisabled);
122 | }
123 | .flex {
124 | display: flex;
125 | }
126 | .half {
127 | flex: 1;
128 | margin-right: 20px;
129 | }
130 | .rule-box {
131 | background: var(--colorBgDark);
132 | border: 1px solid var(--colorBorder);
133 | border-radius: var(--radius);
134 | padding: 0;
135 | height: 350px;
136 | width: 100%;
137 | overflow-y: scroll;
138 | overflow-x: hidden;
139 | }
140 | .pointer {
141 | cursor: pointer;
142 | }
143 | .description {
144 | font-size: 85%;
145 | margin: 0 26px;
146 | }
147 | ul.scripts {
148 | background: var(--colorAccentBgLight);
149 | outline: 1px solid var(--colorAccentBg);
150 | border-radius: var(--radius);
151 | padding-inline-start: 0;
152 | }
153 | ul.subrules {
154 | background: var(--colorSecondaryLight);
155 | outline: 1px solid var(--colorSecondary);
156 | border-radius: var(--radius);
157 | padding-inline-start: 0;
158 | }
159 | li {
160 | list-style-type: none;
161 | }
162 | li.show::after {
163 | content: "";
164 | height: 5px;
165 | display: block;
166 | }
167 | li div {
168 | padding: 5px 10px;
169 | }
170 | ul li:nth-child(even) {
171 | background-color: var(--colorBgAlpha);
172 | }
173 | li ul {
174 | display: none;
175 | margin: 5px 0 0 20px;
176 | padding: 0;
177 | }
178 | .show > ul {
179 | display: block;
180 | }
181 | .show > ul:empty {
182 | display: none;
183 | }
184 | .rule {
185 | cursor: pointer;
186 | margin-right: 10px;
187 | vertical-align: middle;
188 | width: 22px;
189 | height: 100%;
190 | transition: transform 200ms ease;
191 | }
192 | a:focus,
193 | ul:focus,
194 | button:focus,
195 | textarea:focus,
196 | [tabIndex]:focus {
197 | outline-color: var(--colorAccentBg);
198 | }
199 | .rule:hover,
200 | .rule:focus,
201 | #dropdown label:hover .rule {
202 | transform: scale(1.3);
203 | }
204 | #dropdown {
205 | background: #fff;
206 | border: 1px solid var(--colorBorder);
207 | box-shadow: 0 0 5px rgba(0,0,0,0.5);
208 | margin-top: -1px; /* Compensate top border */
209 | margin-left: -11px; /* Compensate left border + div padding */
210 | position: absolute;
211 | top: 0;
212 | left: -200px;
213 | opacity: 0;
214 | visibility: hidden;
215 | transition: opacity 200ms ease-out;
216 | }
217 | #dropdown input {
218 | display: none;
219 | }
220 | #dropdown label {
221 | cursor: pointer;
222 | display: block;
223 | padding: 5px 10px;
224 | }
225 | #dropdown input:checked + label {
226 | background: var(--colorHighlightBgLight);
227 | }
228 | #dropdown label:hover {
229 | background: var(--colorHighlightBgDark) !important;
230 | }
231 | #dropdown input:checked + label:hover{
232 | background: var(--colorHighlightBg) !important;
233 | color: var(--colorHighlightFg);
234 | }
235 | #dropdown.bwl,
236 | #dropdown.policy {
237 | opacity: 1;
238 | visibility: visible;
239 | }
240 | #dropdown.bwl .policy,
241 | #dropdown.policy .bwl {
242 | display: none;
243 | }
244 | .number {
245 | background-color: var(--colorSecondary);
246 | color: white;
247 | border-radius: var(--radiusRounded);
248 | margin-left: 5px;
249 | padding: 0 4px;
250 | font-size: 9pt;
251 | font-weight: bold;
252 | }
253 | .number.scripts {
254 | background-color: var(--colorAccentBg);
255 | }
256 | .number:empty {
257 | display: none;
258 | }
259 | .delete {
260 | opacity: 0;
261 | float: right;
262 | background-color: var(--colorBgDarker);
263 | background-image: url("images/delete.svg") !important;
264 | border-radius: 100%;
265 | border: none;
266 | height: 19px;
267 | width: 19px;
268 | transition: 200ms ease-in;
269 | transform: scale(0);
270 | padding: 0;
271 | }
272 | .delete:hover {
273 | transform: scale(1.25) !important;
274 | background-color: var(--colorAccentBgDark);
275 | }
276 | .delete:active {
277 | background-color: var(--colorAccentBgDarkDark)
278 | }
279 | .delete:focus {
280 | border: 1px solid var(--colorBorderHighlight);
281 | box-shadow: 0 0 0 1px var(--colorBorderHighlight);
282 | outline: none;
283 | }
284 | div:hover > .delete,
285 | .delete:focus {
286 | transform: scale(1);
287 | opacity: 1;
288 | }
289 | .site {
290 | position: relative;
291 | padding-right: 2px;
292 | }
293 | .rule-edit {
294 | position: absolute;
295 | font: inherit;
296 | top: 0;
297 | left: -6px;
298 | bottom: 0;
299 | padding: 0 5px;
300 | border: 1px solid var(--colorBorder);
301 | width: 100%;
302 | min-width: 50px;
303 | outline: none;
304 | }
305 | button {
306 | cursor: pointer;
307 | background: linear-gradient(var(--colorBgLightIntense), var(--colorBg));
308 | color: var(--colorFg);
309 | border: 1px solid var(--colorBorder);
310 | box-shadow: 0 1px var(--colorBg);
311 | padding: 6px 12px;
312 | }
313 | body > button + button {
314 | border-left: 0;
315 | }
316 | button:hover {
317 | background: var(--colorBg);
318 | }
319 | button:active {
320 | background: var(--colorBgDark);
321 | }
322 | textarea {
323 | border: 1px solid var(--colorBorder);
324 | border-radius: var(--border);
325 | background: var(--colorBgIntense);
326 | color: var(--colorFg);
327 | width: 100%;
328 | margin-bottom: 20px;
329 | min-height: 7em;
330 | }
331 | #alertbox {
332 | visibility: hidden;
333 | opacity: 0;
334 | transition: opacity 200ms ease-in;
335 | background-color: var(--colorBgAlpha);
336 | position: fixed;
337 | display: grid;
338 | top: 0;
339 | left: 0;
340 | right: 0;
341 | bottom: 0;
342 | grid-template-rows: 1fr 1fr 1fr;
343 | grid-template-columns: 1fr 1fr 1fr;
344 | grid-template-areas: ". . ."
345 | ". a ."
346 | ". . .";
347 | }
348 | #alertbox .grid {
349 | background-color: var(--colorBg);
350 | border: 1px solid var(--colorBorder);
351 | border-top: 2px solid var(--colorBorderHighlight);
352 | border-radius: var(--radiusRounded);
353 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
354 | padding: 20px;
355 | grid-area: a;
356 | display: grid;
357 | grid-template-rows: 1fr;
358 | }
359 | #alertbox h3 {
360 | margin-top: 0;
361 | }
362 | #alertbox p {
363 | max-height: 40vh;
364 | overflow: auto;
365 | }
366 | #alertbox p > span {
367 | display: block;
368 | padding-left: 20px;
369 | }
370 | #alertbox .rule-box {
371 | height: auto;
372 | max-height: 40vh;
373 | }
374 | #alertbox .rule-box > li {
375 | font-weight: bold;
376 | padding: 10px;
377 | }
378 | #alertbox .rule-box label {
379 | padding: 5px 10px;
380 | cursor: pointer;
381 | }
382 | #alertbox .rule-box label input {
383 | cursor: pointer;
384 | margin-top: 3px;
385 | }
386 | #alertbox .rule-box li ul {
387 | display: block;
388 | }
389 | #alertbox label span {
390 | cursor: pointer;
391 | flex: 1;
392 | }
393 | #alertbox button:last-child {
394 | margin: 0 10px;
395 | }
396 | .visible {
397 | visibility: visible !important;
398 | opacity: 1 !important;
399 | }
400 | @media all and (max-width: 660px) {
401 | .flex {
402 | display: block;
403 | }
404 | }
405 |
--------------------------------------------------------------------------------
/prefs.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
33 |
37 | __MSG_scopePage__
34 | __MSG_scopeSite__
35 | __MSG_scopeDomain__
36 |
38 |
51 |
39 | 
40 |
41 |
40 |
42 | 
43 |
44 |
43 |
45 | 
46 |
47 |
46 |
48 | 
49 |
50 |
49 |
52 |
53 |
54 |
55 | 
ScriptJägerby An_dz
15 |
16 |
31 |
17 |
19 |
20 |
21 | 22 |
23 | __MSG_settingsPolicy__
18 |19 |
20 |
21 | 22 |
24 |
26 |
27 |
28 | 29 |
30 | __MSG_settingsPolicyPrivate__
25 |26 |
27 |
28 | 29 |
32 |
41 |
33 |
36 | __MSG_settingsScripts__
34 |
37 |
40 | __MSG_settingsRules__
38 |__MSG_settingsOthers__
42 |43 |
__MSG_settingsPingDesc__
44 |__MSG_settingsManage__
45 | 46 |
47 |
48 |
51 |
52 |
55 |
56 |
59 |
60 |
63 |
64 |
67 |
68 |
71 |
72 |
75 |
76 |
77 |
89 |
90 |
91 |
--------------------------------------------------------------------------------
/prefs.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | /**
4 | * @var preferences [Object] JSON that holds preferences
5 | *
6 | * @see background.js
7 | * @see default-prefs.js
8 | * @see https://github.com/An-dz/ScriptJaeger/wiki/Dev:-Preferences
9 | */
10 | let preferences = {};
11 |
12 | /**
13 | * @var mergePreferences [Object] Rules to be merged
14 | *
15 | * This is used when merging new preferences so it
16 | * can keep the stuff without costly operations.
17 | */
18 | let mergingPref = {};
19 |
20 | /**
21 | * @var jaegerhut [Object] Badge icons, one for each policy
22 | */
23 | const jaegerhut = {
24 | 0: {
25 | offset: 1,
26 | name: "allowall",
27 | text: chrome.i18n.getMessage("policyAllowAll")
28 | },
29 | 1: {
30 | offset: 2,
31 | name: "relaxed",
32 | text: chrome.i18n.getMessage("policyRelaxed")
33 | },
34 | 2: {
35 | offset: 3,
36 | name: "filtered",
37 | text: chrome.i18n.getMessage("policyFiltered")
38 | },
39 | 3: {
40 | offset: 4,
41 | name: "blockall",
42 | text: chrome.i18n.getMessage("policyBlockAll")
43 | },
44 | true: {
45 | offset: 2,
46 | name: "blacklist",
47 | text: chrome.i18n.getMessage("settingsRulesBlack")
48 | },
49 | false: {
50 | offset: 1,
51 | name: "whitelist",
52 | text: chrome.i18n.getMessage("settingsRulesWhite")
53 | },
54 | null: {
55 | offset: 0,
56 | name: "undefined",
57 | text: chrome.i18n.getMessage("settingsRulesNone")
58 | },
59 | delete: {
60 | name: "delete",
61 | text: chrome.i18n.getMessage("settingsDelete")
62 | }
63 | };
64 |
65 | /**
66 | * @brief Save settings and tell background script about it
67 | *
68 | * Saves the new settings and then send them to the background
69 | * script so it's aware of changes and can replace them right away
70 | *
71 | * As the message API is async the saving might not be in the same
72 | * order as the functions are called, so a timeout is implemented to
73 | * reduce the calls to the background page and the storage API.
74 | */
75 | function saveAndAlertBackground() {
76 | clearTimeout(window.saveDelay);
77 |
78 | window.saveDelay = setTimeout(() => {
79 | // send message to background
80 | chrome.runtime.sendMessage({
81 | type: 3, // alert of preferences changes
82 | prefs: preferences
83 | });
84 |
85 | // save preferences
86 | chrome.storage.local.set({preferences: preferences});
87 | }, 1000);
88 | }
89 |
90 | /* ====================================================================== */
91 |
92 | /**
93 | * @brief Display an alert box
94 | *
95 | * Shows an alert box in the middle of the page
96 | *
97 | * @param okaction [String] Action to execute when clicking the OK Button
98 | * @param title [String] Title of the alert box
99 | * @param msg [String] Message of the alert box (can be html)
100 | * @param text [String] Textbox content, send null to hide
101 | * @param cancelBtn [Boolean] If the cancel button must be shown
102 | */
103 | function showAlert(okaction, title, msg, text, cancelBtn) {
104 | const alertbox = document.getElementById("alertbox");
105 | const textarea = document.getElementById("textarea");
106 |
107 | textarea.hidden = text === null;
108 | textarea.value = text;
109 |
110 | alertbox.className = "visible";
111 | alertbox.dataset.okaction = okaction;
112 | alertbox.querySelector("h3").textContent = title;
113 | alertbox.querySelector("p").innerHTML = msg;
114 | alertbox.querySelector("button:last-child").hidden = !cancelBtn;
115 | }
116 |
117 | /**
118 | * @brief Open rule selector
119 | *
120 | * Opens a 'dropdown' to allow changing the policy on the specified
121 | * level
122 | *
123 | * @param e [Event] Event interface on the clicked DIV
124 | */
125 | function openRuleSelector(e) {
126 | const ruleNode = e.target;
127 |
128 | const dropdown = document.getElementById("dropdown");
129 | const rule = jaegerhut[ruleNode.dataset.rule];
130 | const div = ruleNode.parentNode;
131 | const li = div.parentNode;
132 | const pos = div.getBoundingClientRect();
133 |
134 | // position is relative to visible portion, need to add scrolled distance
135 | pos.y = pos.y + window.scrollY -
136 | // open at the position of the current rule
137 | (rule.offset * document.querySelector("li").offsetHeight);
138 |
139 | dropdown.style.top = `${pos.y}px`;
140 | dropdown.style.left = `${ruleNode.offsetLeft}px`;
141 |
142 | // copy domains and scripts url parts to dropdown element
143 | dropdown.dataset.domains = li.dataset.domains;
144 | dropdown.dataset.scripts = li.dataset.scripts;
145 |
146 | // highlight selected
147 | document.getElementById(rule.name).checked = true;
148 |
149 | // hide options that are not possible
150 | if (li.dataset.scripts === "[]") {
151 | dropdown.className = "policy";
152 | }
153 | else {
154 | dropdown.className = "bwl";
155 | }
156 |
157 | ruleNode.id = "active";
158 | }
159 |
160 | /**
161 | * @brief Toggle sublevel rules
162 | *
163 | * Opens or closes the viewing of sublevel rules, like scripts or
164 | * subdomain rules.
165 | *
166 | * @param e [Event] Event interface on the clicked DIV
167 | */
168 | function toggleSubLevel(e) {
169 | const li = e.target.parentNode;
170 |
171 | if (!li.hasAttribute("class")) {
172 | li.className = "show";
173 | return;
174 | }
175 |
176 | li.removeAttribute("class");
177 | li.querySelectorAll("li.show").forEach(node => {
178 | node.removeAttribute("class");
179 | });
180 | }
181 |
182 | /**
183 | * @brief Delete rule
184 | *
185 | * Deletes the rules where the X button was pressed
186 | *
187 | * @param e [Event] Event interface on the clicked X button
188 | */
189 | function deleteRule(e) {
190 | // nodes
191 | const div = e.target.parentNode;
192 | const li = div.parentNode;
193 | const ul = li.parentNode;
194 | const liP = ul.parentNode;
195 |
196 | const subUrls = JSON.parse(li.dataset.domains);
197 | const scriptUrls = JSON.parse(li.dataset.scripts);
198 |
199 | let level = preferences;
200 | const isRules = scriptUrls.length > 0;
201 |
202 | subUrls.forEach((url, index) => {
203 | if (!isRules && subUrls.length - 1 === index) {
204 | delete level.urls[url];
205 | return;
206 | }
207 |
208 | level = level.urls[url];
209 | });
210 |
211 | if (isRules) {
212 | level = level.rules;
213 | }
214 |
215 | scriptUrls.forEach((url, index) => {
216 | if (scriptUrls.length - 1 === index) {
217 | delete level.urls[url];
218 | return;
219 | }
220 |
221 | level = level.urls[url];
222 | });
223 |
224 | // now that the rule has been deleted time to deal with the DOM
225 | const subNumber = liP.querySelector(".number:not(.scripts)");
226 | const scriptNumber = liP.querySelector(".number.scripts");
227 |
228 | const number = isRules ? scriptNumber : subNumber;
229 |
230 | // update numbers
231 | if (number) {
232 | --number.textContent;
233 |
234 | if (number.textContent === "0") {
235 | number.textContent = "";
236 | }
237 | }
238 |
239 | // remove elements
240 | li.remove();
241 |
242 | // if no more children exists remove clicking event
243 | if (subNumber.textContent === 0 && scriptNumber.textContent === 0) {
244 | liP.removeAttribute("class");
245 | const divP = liP.firstElementChild;
246 | divP.removeAttribute("class");
247 | divP.removeEventListener("click", toggleSubLevel);
248 | }
249 |
250 | // save preferences and alert the background page
251 | saveAndAlertBackground();
252 | }
253 |
254 | /**
255 | * @brief Change the rule
256 | *
257 | * Changes the rule for the specified level on the dropdown
258 | *
259 | * @param e [Event] Event interface on the clicked rule
260 | */
261 | function changeRule(e) {
262 | const dropdown = e.target.parentNode;
263 |
264 | const subUrls = JSON.parse(dropdown.dataset.domains);
265 | const scriptUrls = JSON.parse(dropdown.dataset.scripts);
266 |
267 | let level = preferences;
268 | const isRules = scriptUrls.length > 0;
269 |
270 | subUrls.forEach(url => {
271 | level = level.urls[url];
272 | });
273 |
274 | if (isRules) {
275 | level = level.rules;
276 | }
277 |
278 | scriptUrls.forEach(url => {
279 | level = level.urls[url];
280 | });
281 |
282 | let rule = parseInt(e.target.value, 10);
283 |
284 | // -1 is for null
285 | if (rule < 0) {
286 | rule = null;
287 | }
288 | // rules is boolean
289 | else if (isRules) {
290 | rule = Boolean(rule);
291 | }
292 |
293 | // save rule key
294 | level.rule = rule;
295 |
296 | // change icon to reflect new rule
297 | const active = document.getElementById("active");
298 | active.src = `images/${e.target.id}38.png`;
299 | active.alt = jaegerhut[rule].text[0];
300 | active.title = jaegerhut[rule].text;
301 | active.dataset.rule = rule;
302 | active.removeAttribute("id");
303 |
304 | saveAndAlertBackground();
305 | }
306 |
307 | /**
308 | * @brief Change toplevel policy
309 | *
310 | * Changes the global policy or global private policy
311 | *
312 | * @param e [Event] Event interface on input change
313 | */
314 | function changePolicy(e) {
315 | preferences[e.target.name] = parseInt(e.target.value, 10);
316 | saveAndAlertBackground();
317 | }
318 |
319 | /* ====================================================================== */
320 |
321 | const ruleNodes = Object.freeze({
322 | rule: document.createElement("img"),
323 | url: document.createElement("span"),
324 | subRules: document.createElement("span"),
325 | scriptRules: document.createElement("span"),
326 | delete: document.createElement("button"),
327 | subRulesUl: document.createElement("ul"),
328 | scriptRulesUl: document.createElement("ul"),
329 | });
330 |
331 | ruleNodes.rule.className = "rule";
332 | ruleNodes.url.className = "site";
333 | ruleNodes.subRules.className = "number";
334 | ruleNodes.scriptRules.className = "number scripts";
335 | ruleNodes.delete.className = "delete";
336 | ruleNodes.subRulesUl.className = "subrules";
337 | ruleNodes.scriptRulesUl.className = "scripts";
338 |
339 | ruleNodes.subRules.title = chrome.i18n.getMessage("settingsNumLevels");
340 | ruleNodes.scriptRules.title = chrome.i18n.getMessage("settingsNumScripts");
341 | ruleNodes.delete.title = chrome.i18n.getMessage("settingsDelete");
342 |
343 | ruleNodes.rule.tabIndex = 0;
344 |
345 | /* ====================================================================== */
346 |
347 | /**
348 | * @brief Build an LI DOM Element for the rule
349 | *
350 | * Creates the LI for the preferences list for a single rule.
351 | *
352 | * @param url [String] The URL of the rule
353 | * @param rule [Number/Boolean] Rule index for Jaegerhut index
354 | * @param subRules [Number] number of sub rules
355 | * @param scriptRules [Number] number of script rules
356 | * @param subUrls [Array] List of url parts of the rule level
357 | * @param scriptUrls [Array] List of url parts of the script rule
358 | *
359 | * @return [Element] An LI DOM Element for the rule
360 | */
361 | function createRuleLi(url, rule, subRules, scriptRules, subUrls, scriptUrls) {
362 | const ruleLi = document.createElement("li");
363 | const ruleDiv = document.createElement("div");
364 |
365 | ruleLi.dataset.domains = JSON.stringify(subUrls);
366 | ruleLi.dataset.scripts = JSON.stringify(scriptUrls);
367 |
368 | const nodes = Object.freeze({
369 | rule: ruleNodes.rule.cloneNode(false),
370 | url: ruleNodes.url.cloneNode(false),
371 | subRules: ruleNodes.subRules.cloneNode(false),
372 | scriptRules: ruleNodes.scriptRules.cloneNode(false),
373 | delete: ruleNodes.delete.cloneNode(false),
374 | });
375 |
376 | // the URL
377 | nodes.url.textContent = url;
378 |
379 | // Jaegerhut: Rule applied
380 | nodes.rule.src = `images/${jaegerhut[rule].name}38.png`;
381 | nodes.rule.alt = jaegerhut[rule].text[0];
382 | nodes.rule.title = jaegerhut[rule].text;
383 | nodes.rule.dataset.rule = rule;
384 | nodes.rule.addEventListener("click", openRuleSelector);
385 |
386 | // add icons with the number of sub and script rules
387 | if (subRules > 0) {
388 | nodes.subRules.textContent = subRules;
389 | }
390 |
391 | if (scriptRules > 0) {
392 | nodes.scriptRules.textContent = scriptRules;
393 | }
394 |
395 | // add listener for toggling subrules view
396 | if (subRules > 0 || scriptRules > 0) {
397 | ruleDiv.className = "pointer";
398 | ruleDiv.tabIndex = 0;
399 | ruleDiv.addEventListener("click", toggleSubLevel);
400 | }
401 |
402 | // delete button listener
403 | nodes.delete.addEventListener("click", deleteRule);
404 |
405 | // append nodes
406 | ruleDiv.appendChild(nodes.rule);
407 | ruleDiv.appendChild(nodes.url);
408 | ruleDiv.appendChild(nodes.subRules);
409 | ruleDiv.appendChild(nodes.scriptRules);
410 | ruleDiv.appendChild(nodes.delete);
411 |
412 | ruleLi.appendChild(ruleDiv);
413 |
414 | return ruleLi;
415 | }
416 |
417 | /**
418 | * @brief Fill the list with the rules
419 | *
420 | * Creates and injects the DOM elements to represent the rules
421 | *
422 | * @param rulesList [Array] Rules objects to be printed
423 | * @param node [Element] Node where to inject the generated DOMs
424 | *
425 | * @note Sorting must be done beforehand
426 | */
427 | function fillList(rulesList, node) {
428 | rulesList.forEach(item => {
429 | // get url parts, these are useful for knowing the rule we must change
430 | const subUrls = JSON.parse(node.parentNode.dataset.domains);
431 | const scriptUrls = JSON.parse(node.parentNode.dataset.scripts);
432 |
433 | // we need to append the new url part in the correct part
434 | const useScript = scriptUrls.length > 0 || node.className === "scripts";
435 | const urlParts = useScript ? scriptUrls : subUrls;
436 |
437 | urlParts.push(item[0]);
438 |
439 | // print the url as a whole to make it easier for the user
440 | const url = `${
441 | urlParts[1] === undefined ? "" : (
442 | urlParts[1].length > 0 ? `${urlParts[1]}.` : "*://"
443 | )
444 | }${
445 | urlParts[0] || ""
446 | }${
447 | urlParts[2] || ""
448 | }`;
449 |
450 | const data = item[1];
451 |
452 | // get the sub-levels
453 | const subRules = Object.entries(data.urls);
454 | const scriptRules = data.rules ? Object.entries(data.rules.urls) : [];
455 |
456 | // build the DOM Element for the item
457 | const ruleLi = createRuleLi(
458 | url,
459 | data.rule,
460 | subRules.length,
461 | scriptRules.length,
462 | subUrls,
463 | scriptUrls
464 | );
465 |
466 | const subRulesUl = ruleNodes.subRulesUl.cloneNode(false);
467 | const scriptRulesUl = ruleNodes.scriptRulesUl.cloneNode(false);
468 |
469 | // append everything together
470 | ruleLi.appendChild(subRulesUl);
471 | ruleLi.appendChild(scriptRulesUl);
472 |
473 | // call recursively
474 | fillList(subRules.sort(), subRulesUl);
475 | fillList(scriptRules.sort(), scriptRulesUl);
476 |
477 | node.appendChild(ruleLi);
478 | });
479 | }
480 |
481 | /**
482 | * @brief Display loaded preferences on screen
483 | *
484 | * Gets the current loaded settings and show them on the screen
485 | */
486 | function showPreferences() {
487 | // fill policy preferences
488 | document.querySelector(
489 | `input[name='rule'][value='${preferences.rule}']`
490 | ).checked = true;
491 |
492 | document.querySelector(
493 | `input[name='private'][value='${preferences.private}']`
494 | ).checked = true;
495 |
496 | // ping pref
497 | document.querySelector(
498 | "input[type='checkbox']"
499 | ).checked = !preferences.ping;
500 |
501 | // fill global blackwhitelist
502 | fillList(
503 | Object.entries(preferences.rules.urls).sort(),
504 | document.getElementById("bwl")
505 | );
506 |
507 | // fill site specific settings
508 | fillList(
509 | Object.entries(preferences.urls).sort(),
510 | document.getElementById("rules")
511 | );
512 | }
513 |
514 | /**
515 | * @brief Save preferences and rebuild UI
516 | *
517 | * When lots of changes in the preferences happen, this will
518 | * save the new preferences and will rebuild the rules lists.
519 | */
520 | function newPreferences() {
521 | // clear the tables to allow the new rules to fill
522 | document.getElementById("bwl").innerText = "";
523 | document.getElementById("rules").innerText = "";
524 |
525 | showPreferences();
526 | saveAndAlertBackground();
527 | }
528 |
529 | /* ====================================================================== */
530 |
531 | /**
532 | * @brief Update merge checkboxes
533 | *
534 | * If a lower level is checked, upper levels should be checked too.
535 | * If an upper level is unchecked all sublevel should too.
536 | *
537 | * @param event [Event] raised by the checked listener
538 | */
539 | function checkboxMerge(event) {
540 | const checked = event.target.checked;
541 | const li = event.target.parentNode.parentNode;
542 |
543 | // if enabling a level, all parent levels must be enabled too
544 | if (checked) {
545 | const upperLi = li.parentNode.parentNode;
546 |
547 | // check upper level
548 | if (upperLi.tagName === "LI") {
549 | upperLi.querySelector("input").checked = true;
550 | }
551 |
552 | // rules that delete a point must check its children
553 | // but others should not
554 | if (!event.target.dataset.deleted) {
555 | return;
556 | }
557 | }
558 |
559 | // if disabling a level, all sublevels must be disabled too
560 | li.querySelectorAll("ul > li > label > input").forEach(input => {
561 | input.checked = checked;
562 | });
563 | }
564 |
565 | /**
566 | * @brief Appends an item to the merge settings UI
567 | *
568 | * This appends a single line (LI DOM) for a single rule in the
569 | * merging settings UI (UL DOM).
570 | *
571 | * @param[in] url [String] Name of the rule level
572 | * @param[in] current [String] Name of the current/old rule
573 | * @param[in] change [String] Name of the merging/new rule
574 | *
575 | * @return [Element] constructed li html element
576 | */
577 | function createMergeItem(url, current, change) {
578 | const li = document.createElement("li");
579 |
580 | const label = document.createElement("label");
581 | label.className = "flex";
582 |
583 | const checkbox = document.createElement("input");
584 | checkbox.type = "checkbox";
585 | checkbox.checked = true;
586 | // add event that controls selection of parents and children
587 | checkbox.addEventListener("change", checkboxMerge);
588 |
589 | if (change === "deletes") {
590 | change = "delete";
591 | checkbox.dataset.deleted = true;
592 | checkbox.title = chrome.i18n.getMessage("settingsEnabledCheckbox");
593 | }
594 | else if (change === "delete") {
595 | checkbox.dataset.deleted = true;
596 | checkbox.disabled = true;
597 | checkbox.title = chrome.i18n.getMessage("settingsDisabledCheckbox");
598 | }
599 |
600 | const span = document.createElement("span");
601 | span.innerText = url;
602 |
603 | const currentImg = document.createElement("img");
604 | currentImg.className = "rule";
605 | currentImg.src = `images/${jaegerhut[current].name}38.png`;
606 | currentImg.alt = jaegerhut[current].text[0];
607 | currentImg.title = chrome.i18n.getMessage(
608 | "settingsMergeCurrent", jaegerhut[current].text
609 | );
610 |
611 | const changeImg = document.createElement("img");
612 | changeImg.className = "rule";
613 | changeImg.src = `images/${jaegerhut[change].name}38.png`;
614 | changeImg.alt = jaegerhut[change].text[0];
615 | changeImg.title = chrome.i18n.getMessage(
616 | "settingsMergeNew", jaegerhut[change].text
617 | );
618 |
619 | label.appendChild(checkbox);
620 | label.appendChild(span);
621 | label.appendChild(currentImg);
622 | label.appendChild(changeImg);
623 | li.appendChild(label);
624 |
625 | return li;
626 | }
627 |
628 | /**
629 | * @brief Builds the UI for merging preferences
630 | *
631 | * The preferences object that will be merged into the other does not
632 | * need to have all keys.
633 | *
634 | * @note The `this` argument is sent by the function itself when a
635 | * branch of the preferences is being deleted so that all subitems
636 | * are added on the UI as being deleted as well.
637 | *
638 | * @param[in] this [Boolean] If this whole rule is being deleted
639 | * @param[in] node [Element] DOM Element to inject element
640 | * @param[in] from [Array] List of preferences to be merged
641 | * @param[in] to [Object] Where the preferences must be merged into
642 | */
643 | function checkMerge(node, from, to) {
644 | from.forEach(site => {
645 | const key = site[0];
646 | const value = site[1];
647 |
648 | // move rule to variable to prevent reference
649 | let rule = value.rule;
650 | let urls = value.urls ? Object.entries(value.urls) : [];
651 | let rules = value.rules && value.rules.urls ?
652 | Object.entries(value.rules.urls) : [];
653 |
654 | const oldValue = {
655 | rule: (to[key] && to[key].rule !== undefined) ?
656 | to[key].rule : "delete",
657 |
658 | rules: (to[key] && to[key].rules) ?
659 | to[key].rules : {urls:{}},
660 |
661 | urls: (to[key] && to[key].urls) ?
662 | to[key].urls : {}
663 | };
664 |
665 | const toDelete = this || value.delete;
666 |
667 | if (toDelete) {
668 | rule = `delete${value.delete ? "s" : ""}`;
669 | urls = Object.entries(oldValue.urls);
670 | rules = Object.entries(oldValue.rules.urls);
671 | }
672 | else if (rule === undefined) {
673 | rule = oldValue.rule;
674 | }
675 |
676 | const ulUrls = document.createElement("ul");
677 | const ulRules = document.createElement("ul");
678 | ulUrls.className = node.className;
679 | ulRules.className = "scripts";
680 |
681 | checkMerge.call(toDelete, ulUrls, urls, oldValue.urls);
682 | checkMerge.call(toDelete, ulRules, rules, oldValue.rules.urls);
683 |
684 | // we only show it on the UI if the new `rule` is different
685 | // or if the other keys are present
686 | if (
687 | rule !== oldValue.rule ||
688 | ulUrls.childElementCount > 0 ||
689 | ulRules.childElementCount > 0
690 | ) {
691 | const li = createMergeItem(key, oldValue.rule, rule);
692 |
693 | if (!this) {
694 | value.checkbox = li.firstElementChild.firstElementChild;
695 | }
696 |
697 | if (ulUrls.childElementCount > 0) {
698 | li.className = "show";
699 | li.appendChild(ulUrls);
700 | }
701 |
702 | if (ulRules.childElementCount > 0) {
703 | li.className = "show";
704 | li.appendChild(ulRules);
705 | }
706 |
707 | node.appendChild(li);
708 | }
709 | });
710 | }
711 |
712 | /**
713 | * @brief Builds the UI for merging preferences
714 | *
715 | * The preferences object that will be merged into the other does not
716 | * need to have all keys.
717 | *
718 | * @note The `this` argument is sent by the function itself when a
719 | * branch of the preferences is being deleted so that all subitems
720 | * are added on the UI as being deleted as well.
721 | *
722 | * @param[in] this [Boolean] If this whole rule is being deleted
723 | * @param[in] node [Element] DOM Element to inject element
724 | * @param[in] from [Object] Preferences to be merged
725 | *
726 | * @param[out] to [Object] Where the preferences must be merged into
727 | */
728 | function buildMergeUI(mergingRules) {
729 | const ul = document.querySelector("#alertbox ul");
730 | const ulUrls = document.createElement("ul");
731 | const ulRules = document.createElement("ul");
732 | const liUrls = document.createElement("li");
733 | const liRules = document.createElement("li");
734 |
735 | ulUrls.className = "subrules";
736 | ulRules.className = "scripts";
737 | liUrls.textContent = chrome.i18n.getMessage("settingsRules");
738 | liRules.textContent = chrome.i18n.getMessage("settingsScripts");
739 |
740 | // it's already valid so no need to check type or content
741 | const urls = mergingRules.urls ? Object.entries(mergingRules.urls) : [];
742 | const rules = mergingRules.rules && mergingRules.rules.urls ?
743 | Object.entries(mergingRules.rules.urls) : [];
744 |
745 | checkMerge(ulUrls, urls, preferences.urls);
746 | checkMerge(ulRules, rules, preferences.rules.urls);
747 |
748 | ul.appendChild(liUrls);
749 | ul.appendChild(ulUrls);
750 | ul.appendChild(liRules);
751 | ul.appendChild(ulRules);
752 | }
753 |
754 | /* ====================================================================== */
755 |
756 | /**
757 | * @brief Merges two preferences file
758 | *
759 | * The preferences object that will be merged into the other does
760 | * not need to have all keys.
761 | *
762 | * @param[in] from [Object] Preferences to be merged
763 | *
764 | * @param[out] to [Object] Where the preferences must be merged into
765 | */
766 | function mergePreferences(from, to) {
767 | Object.entries(from).forEach(site => {
768 | const key = site[0];
769 | const value = site[1];
770 |
771 | if (value.checkbox.checked === false) {
772 | return;
773 | }
774 |
775 | if (value.delete === true) {
776 | if (to[key] !== undefined) {
777 | delete to[key];
778 | }
779 |
780 | return;
781 | }
782 |
783 | if (to[key] === undefined) {
784 | to[key] = {
785 | rule: null,
786 | rules: {urls:{}},
787 | urls: {}
788 | };
789 | }
790 |
791 | if (value.rule !== undefined) {
792 | to[key].rule = value.rule;
793 | }
794 |
795 | if (value.rules !== undefined) {
796 | mergePreferences(value.rules.urls, to[key].rules.urls);
797 | }
798 |
799 | if (value.urls !== undefined) {
800 | mergePreferences(value.urls, to[key].urls);
801 | }
802 | });
803 | }
804 |
805 | /**
806 | * @brief Prints all levels the rule is under
807 | *
808 | * Builds an HTML with all the levels the problem is under.
809 | *
810 | * @param at [Array] Each level is an entry
811 | *
812 | * @return [String] HTML string
813 | */
814 | function validatePrintLevels(at) {
815 | return at.map(
816 | level => chrome.i18n.getMessage("settingsInvalidUnder", level)
817 | ).join("
78 |
88 |
79 |
80 |
81 |
84 |
85 |
86 |
87 | "); 818 | } 819 | 820 | /** 821 | * @brief Validates a preferences object 822 | * 823 | * Validation can be done at multiple levels as long as the level 824 | * contains a 'rule' key. Validation is recursive and checks the 825 | * entire object. 826 | * 827 | * @note Unknown keys are deleted 828 | * 829 | * @note Full validation check if the whole object is a valid 830 | * preferences object, it will raise errors if any object is missing. 831 | * Partial only checks if the values are correct and ignores if some 832 | * keys are missing, this check is for validating merging operations. 833 | * 834 | * @param[in] obj [Object] The level in the object to validate 835 | * @param[in] isFull [Boolean] If validation is full or partial 836 | * @param[in] isRules [Boolean] If the level is a blacklist 837 | * @param[in] at [Array] Array identifying the levels 838 | * 839 | * @param[out] warn [Array] Array that will contain warnings 840 | */ 841 | function validate(obj, isFull, isRules, at, warn) { 842 | // this check is to ensure that first all necessary entries exist 843 | if (isFull) { 844 | if (obj.rule === undefined) { 845 | throw new TypeError( 846 | `${chrome.i18n.getMessage( 847 | "settingsInvalidBooleanNull", "rule" 848 | )}${ 849 | validatePrintLevels(at) 850 | }` 851 | ); 852 | } 853 | 854 | if (obj.urls === undefined) { 855 | throw new TypeError( 856 | `${chrome.i18n.getMessage( 857 | "settingsInvalidObject", "urls" 858 | )}${ 859 | validatePrintLevels(at) 860 | }` 861 | ); 862 | } 863 | 864 | if (!isRules && obj.rules === undefined) { 865 | throw new TypeError( 866 | `${chrome.i18n.getMessage( 867 | "settingsInvalidObject", "rules" 868 | )}${ 869 | validatePrintLevels(at) 870 | }` 871 | ); 872 | } 873 | } 874 | 875 | // validate each entry 876 | Object.entries(obj).forEach(entry => { 877 | const key = entry[0]; 878 | const value = entry[1]; 879 | 880 | if (key === "rule") { 881 | // if rule is null then it's correct 882 | if (value === null) { 883 | return; 884 | } 885 | // otherwise more checks are necessary 886 | 887 | // blacklist (rules key) uses boolean 888 | if (isRules) { 889 | if (typeof value !== "boolean") { 890 | throw new TypeError( 891 | `${chrome.i18n.getMessage( 892 | "settingsInvalidBooleanNull", "rule" 893 | )}${ 894 | validatePrintLevels(at) 895 | }` 896 | ); 897 | } 898 | 899 | return; 900 | } 901 | 902 | // policy uses a number 903 | if (typeof value !== "number") { 904 | throw new TypeError( 905 | `${chrome.i18n.getMessage( 906 | "settingsInvalidNumberNull", "rule" 907 | )}${ 908 | validatePrintLevels(at) 909 | }` 910 | ); 911 | } 912 | 913 | if (value < 0 || value > 3) { 914 | throw new RangeError( 915 | `${chrome.i18n.getMessage( 916 | "settingsInvalidRangeNull", "rule" 917 | )}${ 918 | validatePrintLevels(at) 919 | }` 920 | ); 921 | } 922 | 923 | return; 924 | } 925 | 926 | if (key === "rules") { 927 | // blacklist (rules key) doesn't contain rules subkeys 928 | if (isRules) { 929 | throw new SyntaxError( 930 | `${chrome.i18n.getMessage( 931 | "settingsInvalidLevel", "rules" 932 | )}${ 933 | validatePrintLevels(at) 934 | }` 935 | ); 936 | } 937 | 938 | // policy objects must contain a rules key/object 939 | if (typeof value !== "object") { 940 | throw new TypeError( 941 | `${chrome.i18n.getMessage( 942 | "settingsInvalidObject", "rules" 943 | )}${ 944 | validatePrintLevels(at) 945 | }` 946 | ); 947 | } 948 | 949 | const atNew = [...at, "rules"]; 950 | 951 | // rules key/object must contain a urls key/object 952 | if (typeof value.urls !== "object") { 953 | throw new TypeError( 954 | `${chrome.i18n.getMessage( 955 | "settingsInvalidObject", "urls" 956 | )}${ 957 | validatePrintLevels(atNew) 958 | }` 959 | ); 960 | } 961 | 962 | // rules key should only have urls key 963 | // this is here because of the full check 964 | Object.keys(value).forEach(subkey => { 965 | if (subkey !== "urls") { 966 | warn.push( 967 | `${chrome.i18n.getMessage( 968 | "settingsWarningText", subkey 969 | )}${ 970 | validatePrintLevels(atNew) 971 | }` 972 | ); 973 | 974 | delete value[subkey]; 975 | } 976 | }); 977 | 978 | // validate children 979 | Object.entries(value.urls).forEach(object => { 980 | validate( 981 | object[1], 982 | isFull, 983 | true, 984 | [...at, "urls", object[0]], 985 | warn 986 | ); 987 | }); 988 | 989 | return; 990 | } 991 | 992 | if (key === "urls") { 993 | // all policy and blacklist objects must contain a urls object 994 | if (typeof value !== "object") { 995 | throw new TypeError( 996 | `${chrome.i18n.getMessage( 997 | "settingsInvalidObject", "urls" 998 | )}${ 999 | validatePrintLevels(at) 1000 | }` 1001 | ); 1002 | } 1003 | 1004 | const children = Object.entries(value); 1005 | 1006 | // limit to 3 levels of policy rules or 2 of script block rules 1007 | if ( 1008 | children.length > 0 && ( 1009 | (!isRules && at.length > 7) || 1010 | (isRules && at.length - at.indexOf("rules") > 5) 1011 | ) 1012 | ) { 1013 | warn.push( 1014 | `${chrome.i18n.getMessage( 1015 | "settingsWarningText2", key 1016 | )}${ 1017 | validatePrintLevels(at) 1018 | }` 1019 | ); 1020 | 1021 | value.urls = {}; 1022 | return; 1023 | } 1024 | 1025 | // validate children 1026 | children.forEach(object => { 1027 | validate( 1028 | object[1], 1029 | isFull, 1030 | isRules, 1031 | [...at, "urls", object[0]], 1032 | warn 1033 | ); 1034 | }); 1035 | 1036 | return; 1037 | } 1038 | 1039 | if (key === "delete") { 1040 | if (isFull) { 1041 | throw new SyntaxError( 1042 | `${chrome.i18n.getMessage( 1043 | "settingsInvalidDelete", "delete" 1044 | )}${ 1045 | validatePrintLevels(at) 1046 | }` 1047 | ); 1048 | } 1049 | 1050 | if (value !== true) { 1051 | throw new TypeError( 1052 | `${chrome.i18n.getMessage( 1053 | "settingsInvalidValue", ["delete", "true"] 1054 | )}${ 1055 | validatePrintLevels(at) 1056 | }` 1057 | ); 1058 | } 1059 | 1060 | return; 1061 | } 1062 | 1063 | // private key is only used under root 1064 | if (key === "private" && at.length === 1) { 1065 | if (typeof value !== "number") { 1066 | throw new TypeError( 1067 | `${chrome.i18n.getMessage( 1068 | "settingsInvalidNumber", "private" 1069 | )}${ 1070 | validatePrintLevels(at) 1071 | }` 1072 | ); 1073 | } 1074 | 1075 | if (value < 0 || value > 3) { 1076 | throw new RangeError( 1077 | `${chrome.i18n.getMessage( 1078 | "settingsInvalidRange", "private" 1079 | )}${ 1080 | validatePrintLevels(at) 1081 | }` 1082 | ); 1083 | } 1084 | 1085 | return; 1086 | } 1087 | 1088 | warn.push( 1089 | `${chrome.i18n.getMessage( 1090 | "settingsWarningText", key 1091 | )}${ 1092 | validatePrintLevels(at) 1093 | }` 1094 | ); 1095 | 1096 | delete obj[key]; 1097 | }); 1098 | } 1099 | 1100 | /** 1101 | * @brief Merge imported file into current preferences 1102 | * 1103 | * A special preferences object can be merged into the preferences. 1104 | * This special object allows to add, delete, modify and ignore rules. 1105 | * 1106 | * @param[in] importedRules [String] Preferences to be merged 1107 | * 1108 | * @warn Side effect: mergingPref receives the mergingRules object 1109 | */ 1110 | function askMergePreferences(mergingRules) { 1111 | try { 1112 | mergingRules = JSON.parse(mergingRules); 1113 | 1114 | if (typeof mergingRules !== "object") { 1115 | throw new SyntaxError( 1116 | chrome.i18n.getMessage("settingsInvalidData") 1117 | ); 1118 | } 1119 | 1120 | const warn = []; 1121 | validate(mergingRules, false, false, ["root"], warn); 1122 | 1123 | if (warn.length > 0) { 1124 | // show warning to let user know some stuff was removed 1125 | showAlert( 1126 | "askmerge", 1127 | chrome.i18n.getMessage("settingsWarningTitle"), 1128 | warn, 1129 | JSON.stringify(mergingRules, null, " "), 1130 | false 1131 | ); 1132 | 1133 | return; 1134 | } 1135 | 1136 | showAlert( 1137 | "merge", 1138 | chrome.i18n.getMessage("settingsMergeTitle"), 1139 | chrome.i18n.getMessage("settingsMergeMsg"), 1140 | null, 1141 | true 1142 | ); 1143 | 1144 | buildMergeUI(mergingRules); 1145 | mergingPref = mergingRules; 1146 | } 1147 | catch (error) { 1148 | showAlert( 1149 | "none", 1150 | chrome.i18n.getMessage("settingsInvalidPrefs"), 1151 | error.message, 1152 | null, 1153 | false 1154 | ); 1155 | } 1156 | } 1157 | 1158 | /** 1159 | * @brief Replace current preferences with a new one 1160 | * 1161 | * Will try to replace the current preferences with a new one 1162 | * provided in the textarea of the import dialogue. The new file 1163 | * is validated before importing is allowed and will raise error 1164 | * or warning dialogues. 1165 | */ 1166 | function importPreferences() { 1167 | try { 1168 | const prefs = JSON.parse(document.getElementById("textarea").value); 1169 | 1170 | if (typeof prefs !== "object") { 1171 | throw new TypeError( 1172 | chrome.i18n.getMessage("settingsInvalidData") 1173 | ); 1174 | } 1175 | 1176 | // null is not allowed at root 1177 | if (typeof prefs.rule !== "number") { 1178 | throw new TypeError( 1179 | `${chrome.i18n.getMessage( 1180 | "settingsInvalidNumber", "rule" 1181 | )}${chrome.i18n.getMessage( 1182 | "settingsInvalidUnder", "root" 1183 | )}` 1184 | ); 1185 | } 1186 | 1187 | const warn = []; 1188 | 1189 | // validate preferences 1190 | validate(prefs, true, false, ["root"], warn); 1191 | // will only be reached if no errors occured 1192 | preferences = prefs; 1193 | 1194 | if (warn.length > 0) { 1195 | showAlert( 1196 | "none", 1197 | chrome.i18n.getMessage("settingsWarningTitle"), 1198 | warn, 1199 | null, 1200 | false 1201 | ); 1202 | } 1203 | } 1204 | catch (error) { 1205 | showAlert( 1206 | "none", 1207 | chrome.i18n.getMessage("settingsInvalidPrefs"), 1208 | error.message, 1209 | null, 1210 | false 1211 | ); 1212 | return; 1213 | } 1214 | 1215 | newPreferences(); 1216 | } 1217 | 1218 | /* ====================================================================== */ 1219 | 1220 | /** 1221 | * @brief Close the alert box 1222 | * 1223 | * Closes the alert box clearing all content in the textbox 1224 | */ 1225 | function closeAlert() { 1226 | const alertbox = document.getElementById("alertbox"); 1227 | const textarea = document.getElementById("textarea"); 1228 | 1229 | if (alertbox.dataset.okaction === "merge") { 1230 | history.pushState(null, document.title, "prefs.html"); 1231 | } 1232 | 1233 | textarea.hidden = true; 1234 | textarea.value = null; 1235 | 1236 | alertbox.className = null; 1237 | alertbox.dataset.okaction = "none"; 1238 | } 1239 | 1240 | /** 1241 | * @brief Alertbox OK button action 1242 | * 1243 | * Execute the correct action when clicking the OK button in the alert 1244 | */ 1245 | function okClick() { 1246 | const okaction = document.getElementById("alertbox").dataset.okaction; 1247 | 1248 | if (okaction === "import") { 1249 | importPreferences(); 1250 | } 1251 | else if (okaction === "reset") { 1252 | document.querySelector("#alertbox button:last-child").click(); 1253 | 1254 | const script = document.createElement("script"); 1255 | script.src = "default-prefs.js"; 1256 | script.type = "text/javascript"; 1257 | script.id = "default"; 1258 | document.head.appendChild(script); 1259 | } 1260 | else if (okaction === "merge") { 1261 | // it's been already validated 1262 | mergePreferences(mergingPref.urls, preferences.urls); 1263 | mergePreferences(mergingPref.rules.urls, preferences.rules.urls); 1264 | newPreferences(); 1265 | } 1266 | else if (okaction === "askmerge") { 1267 | const merge = document.getElementById("textarea").value; 1268 | askMergePreferences(merge); 1269 | return; 1270 | } 1271 | 1272 | closeAlert(); 1273 | } 1274 | 1275 | /** 1276 | * @brief Reset preferences 1277 | * 1278 | * Click listener for the reset preferences button 1279 | */ 1280 | function resetPreferencesButton() { 1281 | showAlert( 1282 | "reset", 1283 | chrome.i18n.getMessage("settingsManageResetTitle"), 1284 | chrome.i18n.getMessage("settingsManageResetText"), 1285 | null, 1286 | true 1287 | ); 1288 | } 1289 | 1290 | /** 1291 | * @brief Export preferences 1292 | * 1293 | * Click listener for the export preferences button 1294 | */ 1295 | function exportPreferencesButton() { 1296 | showAlert( 1297 | "none", 1298 | chrome.i18n.getMessage("settingsManageExportTitle"), 1299 | chrome.i18n.getMessage("settingsManageExportText"), 1300 | JSON.stringify(preferences, null, " "), 1301 | false 1302 | ); 1303 | } 1304 | 1305 | /** 1306 | * @brief Import preferences 1307 | * 1308 | * Click listener for the import preferences button 1309 | */ 1310 | function importPreferencesButton() { 1311 | showAlert( 1312 | "import", 1313 | chrome.i18n.getMessage("settingsManageImportTitle"), 1314 | chrome.i18n.getMessage("settingsManageImportText"), 1315 | "", 1316 | true 1317 | ); 1318 | } 1319 | 1320 | /** 1321 | * @brief Merge preferences 1322 | * 1323 | * Click listener for the merge preferences button 1324 | */ 1325 | function mergePreferencesButton() { 1326 | showAlert( 1327 | "askmerge", 1328 | chrome.i18n.getMessage("settingsManageMergeTitle"), 1329 | chrome.i18n.getMessage("settingsManageMergeText"), 1330 | "", 1331 | true 1332 | ); 1333 | } 1334 | 1335 | /* ====================================================================== */ 1336 | 1337 | /** 1338 | * @brief Load preferences 1339 | * 1340 | * Loads saved preferences from storage API 1341 | * 1342 | * @note Runs immediately on page load 1343 | */ 1344 | chrome.storage.local.get((pref) => { 1345 | preferences = pref.preferences; 1346 | showPreferences(); 1347 | 1348 | // now we can try merging preferences 1349 | if (document.location.search.length > 0) { 1350 | askMergePreferences( 1351 | decodeURIComponent(document.location.search.substring(1)) 1352 | ); 1353 | } 1354 | }); 1355 | 1356 | /** 1357 | * @brief Translate and attach events 1358 | * 1359 | * This will translate the page and attach the events to the nodes. 1360 | */ 1361 | document.addEventListener("DOMContentLoaded", () => { 1362 | // translate 1363 | document.title = chrome.i18n.getMessage("settingsTitle"); 1364 | 1365 | const template = document.body.innerHTML; 1366 | 1367 | document.body.innerHTML = template.replace( 1368 | /__MSG_(\w+)__/g, 1369 | (a, b) => chrome.i18n.getMessage(b) 1370 | ); 1371 | 1372 | // Hides the rule selector when you click anywhere on the page 1373 | document.addEventListener("click", () => { 1374 | const dropdown = document.getElementById("dropdown"); 1375 | dropdown.className = ""; 1376 | 1377 | for (const key in dropdown.dataset) { 1378 | delete dropdown.dataset[key]; 1379 | } 1380 | }, true); 1381 | 1382 | // first two preferences 1383 | document.querySelectorAll("input[name='rule']").forEach(input => { 1384 | input.addEventListener("change", changeRule); 1385 | }); 1386 | 1387 | document.querySelectorAll("input[name='private']").forEach(input => { 1388 | input.addEventListener("change", changePolicy); 1389 | }); 1390 | 1391 | // ping preferences 1392 | document.querySelector("input[name='ping']").addEventListener( 1393 | "change", e => { 1394 | preferences.ping = !e.target.checked; 1395 | saveAndAlertBackground(); 1396 | } 1397 | ); 1398 | 1399 | // preferences management buttons 1400 | document.getElementById("r").addEventListener( 1401 | "click", resetPreferencesButton 1402 | ); 1403 | document.getElementById("e").addEventListener( 1404 | "click", exportPreferencesButton 1405 | ); 1406 | document.getElementById("i").addEventListener( 1407 | "click", importPreferencesButton 1408 | ); 1409 | document.getElementById("m").addEventListener( 1410 | "click", mergePreferencesButton 1411 | ); 1412 | 1413 | // alert buttons 1414 | const buttons = document.querySelectorAll("#alertbox button"); 1415 | buttons[0].addEventListener("click", okClick); 1416 | buttons[1].addEventListener("click", closeAlert); 1417 | }); 1418 | 1419 | /** 1420 | * @brief Called when default preferences are loaded 1421 | * 1422 | * Updates the interface to display the new preferences and saves 1423 | * them. 1424 | * 1425 | * @see default-prefs.js 1426 | */ 1427 | function defaultPreferencesLoaded() { 1428 | newPreferences(); 1429 | // remove the injected script 1430 | document.getElementById("default").remove(); 1431 | } 1432 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | html { 2 | --colorBorder: #d1d0d2; 3 | --colorBorderHighlight: #c83838; 4 | --colorAccentBg: #c83838; 5 | --colorAccentBgDark: #b22128; 6 | --colorAccentBgLight: #ffb7b7; 7 | --colorSecondary: #73ab55; 8 | --colorSecondaryLight: #c2d8b7; 9 | --colorFg: #1e1e1e; 10 | --colorBg: #fafafa; 11 | --colorBgAlpha: rgba(255, 255, 255, 0.5); 12 | --colorBgLightIntense: #fff; 13 | --colorBgIntense: #fff; 14 | --colorBgDark: #dedede; 15 | --colorBgDarker: rgba(0, 0, 0, 0.3); 16 | --colorHighlightBg: #c83838; 17 | --colorHighlightBgDark: #dedede; 18 | --colorHighlightBgLight: #ffb7b7; 19 | --colorHighlightFg: #fff; 20 | --colorDisabled: #8e8e8e; 21 | --radius: 0; 22 | --radiusRound: 100px; 23 | --radiusRounded: 2px; 24 | --colorScopeGlobal: #ab74c2; 25 | --colorScopeDomain: #f8b11b; 26 | --colorScopeSite: #18c5a1; 27 | --colorScopePage: #e5d817; 28 | --colorPolicyAllow: #d84a4a; 29 | --colorPolicyRelaxed: #559fe6; 30 | --colorPolicyFiltered: #73ab55; 31 | --colorPolicyBlock: #26272a; 32 | --colorScopeGlobalLight: #d8c1e2; 33 | --colorScopeDomainLight: #fcde9c; 34 | --colorScopeSiteLight: #9ce8d9; 35 | --colorScopePageLight: #f9f3a3; 36 | font-family: sans-serif; 37 | } 38 | --------------------------------------------------------------------------------