devol/libredirect
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Closes #74 - Option to manually override theme.

Browse Source
This commit is contained in:
SimonBrazell 2020-07-16 09:59:14 +10:00
parent 13b7f4b007
commit 7ba890045e
6 changed files with 888 additions and 675 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
manifest.json
View File

@ -1,12 +1,10 @@
{ {
"name": "__MSG_extensionName__", "name": "__MSG_extensionName__",
"description": "__MSG_extensionDescription__", "description": "__MSG_extensionDescription__",
"version": "1.1.36", "version": "1.1.37",
"manifest_version": 2, "manifest_version": 2,
"background": { "background": {
"scripts": [ "scripts": ["background.js"],
"background.js"
],
"persistent": true "persistent": true
}, },
"default_locale": "en", "default_locale": "en",
@ -16,12 +14,7 @@
"48": "assets/images/icon48.png", "48": "assets/images/icon48.png",
"128": "assets/images/icon128.png" "128": "assets/images/icon128.png"
}, },
"permissions": [ "permissions": ["storage", "webRequest", "webRequestBlocking", "<all_urls>"],
"storage",
"webRequest",
"webRequestBlocking",
"<all_urls>"
],
"browser_action": { "browser_action": {
"default_title": "Privacy Redirect", "default_title": "Privacy Redirect",
"default_popup": "pages/popup/popup.html", "default_popup": "pages/popup/popup.html",
@ -41,9 +34,7 @@
"*://pbs.twimg.com/*", "*://pbs.twimg.com/*",
"*://video.twimg.com/*" "*://video.twimg.com/*"
], ],
"js": [ "js": ["assets/javascript/remove-twitter-sw.js"],
"assets/javascript/remove-twitter-sw.js"
],
"run_at": "document_start" "run_at": "document_start"
}, },
{ {
@ -64,9 +55,7 @@
"*://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion/*", "*://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion/*",
"*://mfqczy4mysscub2s.onio/*n" "*://mfqczy4mysscub2s.onio/*n"
], ],
"js": [ "js": ["assets/javascript/persist-invidious-prefs.js"],
"assets/javascript/persist-invidious-prefs.js"
],
"run_at": "document_start" "run_at": "document_start"
} }
], ],

308
pages/options/options.html
View File

@ -1,20 +1,36 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title> <title></title>
<link href="../styles.css" rel="stylesheet"> <link href="../styles.css" rel="stylesheet" />
<title>Privacy Redirect Options</title> <title>Privacy Redirect Options</title>
</head> </head>
<body>
<body>
<div class="tab"> <div class="tab">
<button class="tablinks" id="general-tab" data-localize="__MSG_generalTab__">General</button> <button
<button class="tablinks" id="advanced-tab" data-localize="__MSG_advancedTab__">Advanced</button> class="tablinks"
<button class="tablinks" id="exceptions-tab" data-localize="__MSG_exceptionsTab__">Exceptions</button> id="general-tab"
data-localize="__MSG_generalTab__"
>
General
</button>
<button
class="tablinks"
id="advanced-tab"
data-localize="__MSG_advancedTab__"
>
Advanced
</button>
<button
class="tablinks"
id="exceptions-tab"
data-localize="__MSG_exceptionsTab__"
>
Exceptions
</button>
</div> </div>
<div id="general" class="tabcontent"> <div id="general" class="tabcontent">
@ -26,7 +42,12 @@
<h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1> <h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp; <input
aria-hidden="true"
id="disable-nitter"
type="checkbox"
checked
/>&nbsp;
<label for="disable-nitter" class="checkbox-label"></label> <label for="disable-nitter" class="checkbox-label"></label>
</td> </td>
</tr> </tr>
@ -38,12 +59,18 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_disableInvidious__">Invidious Redirects</h1> <h1 data-localize="__MSG_disableInvidious__">
Invidious Redirects
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp; <input
<label for="disable-invidious" class="checkbox-label"> aria-hidden="true"
</label> id="disable-invidious"
type="checkbox"
checked
/>&nbsp;
<label for="disable-invidious" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -54,12 +81,18 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_disableBibliogram__">Bibliogram Redirects</h1> <h1 data-localize="__MSG_disableBibliogram__">
Bibliogram Redirects
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp; <input
<label for="disable-bibliogram" class="checkbox-label"> aria-hidden="true"
</label> id="disable-bibliogram"
type="checkbox"
checked
/>&nbsp;
<label for="disable-bibliogram" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -70,12 +103,18 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_disableOsm__">OpenStreetMap Redirects</h1> <h1 data-localize="__MSG_disableOsm__">
OpenStreetMap Redirects
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp; <input
<label for="disable-osm" class="checkbox-label"> aria-hidden="true"
</label> id="disable-osm"
type="checkbox"
checked
/>&nbsp;
<label for="disable-osm" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -84,57 +123,100 @@
<section class="settings-block"> <section class="settings-block">
<h1 data-localize="__MSG_nitterInstance__">Nitter Instance</h1> <h1 data-localize="__MSG_nitterInstance__">Nitter Instance</h1>
<div class="autocomplete"> <div class="autocomplete">
<input id="nitter-instance" type="url" name="nitter-instance" placeholder="https://nitter.net"> <input
id="nitter-instance"
type="url"
name="nitter-instance"
placeholder="https://nitter.net"
/>
</div> </div>
</section> </section>
<section class="settings-block"> <section class="settings-block">
<h1 data-localize="__MSG_invidiousInstance__">Invidious Instance</h1> <h1 data-localize="__MSG_invidiousInstance__">Invidious Instance</h1>
<div class="autocomplete"> <div class="autocomplete">
<input id="invidious-instance" type="url" placeholder="https://invidio.us"> <input
id="invidious-instance"
type="url"
placeholder="https://invidio.us"
/>
</div> </div>
</section> </section>
<section class="settings-block"> <section class="settings-block">
<h1 data-localize="__MSG_bibliogramInstance__">Bibliogram Instance</h1> <h1 data-localize="__MSG_bibliogramInstance__">Bibliogram Instance</h1>
<div class="autocomplete"> <div class="autocomplete">
<input id="bibliogram-instance" type="url" placeholder="https://bibliogram.art"> <input
id="bibliogram-instance"
type="url"
placeholder="https://bibliogram.art"
/>
</div> </div>
</section> </section>
<sections class="settings-block"> <section class="settings-block">
<h1 data-localize="__MSG_osmInstance__">OpenStreetMap Instance</h1> <h1 data-localize="__MSG_osmInstance__">OpenStreetMap Instance</h1>
<div class="autocomplete"> <div class="autocomplete">
<input id="osm-instance" type="url" placeholder="https://openstreetmap.org"> <input
id="osm-instance"
type="url"
placeholder="https://openstreetmap.org"
/>
</div> </div>
</sections> </section>
<section class="settings-block">
<h1 data-localize="__MSG_theme__">Theme</h1>
<select id="theme">
<option value="">System</option>
<option value="light-theme">Light</option>
<option value="dark-theme">Dark</option>
</select>
</section>
</div> </div>
<div id="advanced" class="tabcontent"> <div id="advanced" class="tabcontent">
<section class="settings-block"> <section class="settings-block">
<table class="option" aria-label="Always proxy videos through Invidious"> <table
class="option"
aria-label="Always proxy videos through Invidious"
>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_alwaysProxy__">Always proxy videos through Invidious</h1> <h1 data-localize="__MSG_alwaysProxy__">
Always proxy videos through Invidious
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="always-proxy" type="checkbox" checked>&nbsp; <input
<label for="always-proxy" class="checkbox-label"> aria-hidden="true"
</label> id="always-proxy"
type="checkbox"
checked
/>&nbsp;
<label for="always-proxy" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </section>
<section class="settings-block"> <section class="settings-block">
<table class="option" aria-label="Only redirect embedded video to Invidious"> <table
class="option"
aria-label="Only redirect embedded video to Invidious"
>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h1> <h1 data-localize="__MSG_onlyEmbeddedVideo__">
Only redirect embedded video to Invidious
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="only-embed" type="checkbox" checked>&nbsp; <input
<label for="only-embed" class="checkbox-label"> aria-hidden="true"
</label> id="only-embed"
type="checkbox"
checked
/>&nbsp;
<label for="only-embed" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -146,7 +228,9 @@
<option value="">Default</option> <option value="">Default</option>
<option value="hd720">720p</option> <option value="hd720">720p</option>
<option value="medium">480p</option> <option value="medium">480p</option>
<option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option> <option value="dash"
>DASH (Dynamic Adaptive Streaming over HTTP)</option
>
</select> </select>
</section> </section>
<section class="settings-block"> <section class="settings-block">
@ -154,10 +238,17 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_invidiousDarkMode__">Invidious dark mode always on</h1> <h1 data-localize="__MSG_invidiousDarkMode__">
Invidious dark mode always on
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="invidious-dark-mode" type="checkbox" checked>&nbsp; <input
aria-hidden="true"
id="invidious-dark-mode"
type="checkbox"
checked
/>&nbsp;
<label for="invidious-dark-mode" class="checkbox-label"> <label for="invidious-dark-mode" class="checkbox-label">
</label> </label>
</td> </td>
@ -167,30 +258,54 @@
</section> </section>
<section class="settings-block"> <section class="settings-block">
<h1 data-localize="__MSG_invidiousVolume__">Invidious Volume</h1> <h1 data-localize="__MSG_invidiousVolume__">Invidious Volume</h1>
<input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1"> <input
id="invidious-volume"
name="invidious-volume"
type="range"
min="0"
max="100"
step="1"
/>
</section> </section>
<section class="settings-block"> <section class="settings-block">
<h1 data-localize="__MSG_invidiousPlayerStyle__">Invidious Player Style</h1> <h1 data-localize="__MSG_invidiousPlayerStyle__">
Invidious Player Style
</h1>
<select id="invidious-player-style"> <select id="invidious-player-style">
<option value="">Invidious</option> <option value="">Invidious</option>
<option value="youtube">YouTube</option> <option value="youtube">YouTube</option>
</select> </select>
</section> </section>
<section class="settings-block"> <section class="settings-block">
<h1 data-localize="__MSG_invidiousSubtitles__">Invidious Subtitles - language codes (comma-separated)</h1> <h1 data-localize="__MSG_invidiousSubtitles__">
<input id="invidious-subtitles" name="invidious-subtitles" type="text"> Invidious Subtitles - language codes (comma-separated)
</h1>
<input
id="invidious-subtitles"
name="invidious-subtitles"
type="text"
/>
</section> </section>
<section class="settings-block"> <section class="settings-block">
<table class="option" aria-label="Invidious automatically play video on load"> <table
class="option"
aria-label="Invidious automatically play video on load"
>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_invidiousAutoplay__">Invidious automatically play video on load</h1> <h1 data-localize="__MSG_invidiousAutoplay__">
Invidious automatically play video on load
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="invidious-autoplay" type="checkbox" checked>&nbsp; <input
<label for="invidious-autoplay" class="checkbox-label"> aria-hidden="true"
</label> id="invidious-autoplay"
type="checkbox"
checked
/>&nbsp;
<label for="invidious-autoplay" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -201,10 +316,17 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_persistInvidiousPrefs__">Persist Invidious preferences (as cookie)</h1> <h1 data-localize="__MSG_persistInvidiousPrefs__">
Persist Invidious preferences (as cookie)
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="persist-invidious-prefs" type="checkbox" checked>&nbsp; <input
aria-hidden="true"
id="persist-invidious-prefs"
type="checkbox"
checked
/>&nbsp;
<label for="persist-invidious-prefs" class="checkbox-label"> <label for="persist-invidious-prefs" class="checkbox-label">
</label> </label>
</td> </td>
@ -213,16 +335,25 @@
</table> </table>
</section> </section>
<section class="settings-block"> <section class="settings-block">
<table class="option" aria-label="Proactively remove Twitter service worker"> <table
class="option"
aria-label="Proactively remove Twitter service worker"
>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h1> <h1 data-localize="__MSG_removeTwitterSW__">
Proactively remove Twitter service worker
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>&nbsp; <input
<label for="remove-twitter-sw" class="checkbox-label"> aria-hidden="true"
</label> id="remove-twitter-sw"
type="checkbox"
checked
/>&nbsp;
<label for="remove-twitter-sw" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -231,7 +362,10 @@
</div> </div>
<div id="exceptions" class="tabcontent"> <div id="exceptions" class="tabcontent">
<section class="settings-block" data-localize="__MSG_exceptionsDescription__"> <section
class="settings-block"
data-localize="__MSG_exceptionsDescription__"
>
<p> <p>
Enter a URL or Regular Expression to be excluded from redirects. Enter a URL or Regular Expression to be excluded from redirects.
</p> </p>
@ -240,8 +374,8 @@
will be excluded from redirects. will be excluded from redirects.
</p> </p>
<p> <p>
<b>Note -</b> Supports JavaScript regular expressions, excluding <b>Note -</b> Supports JavaScript regular expressions, excluding the
the enclosing forward slashes. enclosing forward slashes.
</p> </p>
</section> </section>
<section class="settings-block"> <section class="settings-block">
@ -254,21 +388,52 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<input id="new-exceptions-item" type="text" placeholder="URL or RegExp"> <input
id="new-exceptions-item"
type="text"
placeholder="URL or RegExp"
/>
</td> </td>
<td> <td>
<input type="radio" id="url" name="type" value="URL" checked> <input type="radio" id="url" name="type" value="URL" checked />
<label class="radio" for="url">URL</label> <label class="radio" for="url">URL</label>
<input type="radio" id="regExp" name="type" value="RegExp"> <input type="radio" id="regExp" name="type" value="RegExp" />
<label class="radio" for="regExp">RegExp</label> <label class="radio" for="regExp">RegExp</label>
</td> </td>
<td> <td>
<button id="add-to-exceptions"> <button id="add-to-exceptions">
<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'> <svg
<line x1='256' y1='112' x2='256' y2='400' xmlns="http://www.w3.org/2000/svg"
style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' /> width="512"
<line x1='400' y1='256' x2='112' y2='256' height="512"
style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' /> viewBox="0 0 512 512"
>
<line
x1="256"
y1="112"
x2="256"
y2="400"
style="
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 32px;
"
/>
<line
x1="400"
y1="256"
x2="112"
y2="256"
style="
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 32px;
"
/>
</svg> </svg>
</button> </button>
</td> </td>
@ -281,6 +446,5 @@
<script src="./options.js"></script> <script src="./options.js"></script>
<script src="../../assets/javascript/localise.js"></script> <script src="../../assets/javascript/localise.js"></script>
</body> </body>
</html> </html>

341
pages/options/options.js
View File

@ -1,95 +1,93 @@
'use strict'; "use strict";
const nitterInstances = [ const nitterInstances = [
'https://nitter.net', "https://nitter.net",
'https://nitter.snopyta.org', "https://nitter.snopyta.org",
'https://nitter.42l.fr', "https://nitter.42l.fr",
'https://nitter.nixnet.services', "https://nitter.nixnet.services",
'https://nitter.13ad.de', "https://nitter.13ad.de",
'https://nitter.pussthecat.org', "https://nitter.pussthecat.org",
'https://nitter.mastodont.cat', "https://nitter.mastodont.cat",
'https://nitter.dark.fail', "https://nitter.dark.fail",
'https://nitter.tedomum.net', "https://nitter.tedomum.net",
'https://t.maisputain.ovh', "https://t.maisputain.ovh",
'http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion', "http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion",
'http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion' "http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion",
]; ];
const invidiousInstances = [ const invidiousInstances = [
'https://invidio.us', "https://invidio.us",
'https://invidious.snopyta.org', "https://invidious.snopyta.org",
'https://invidious.fdn.fr', "https://invidious.fdn.fr",
'https://invidious.13ad.de', "https://invidious.13ad.de",
'https://watch.nettohikari.com', "https://watch.nettohikari.com",
'https://yewtu.be', "https://yewtu.be",
'https://yt.maisputain.ovh', "https://yt.maisputain.ovh",
'https://invidious.toot.koeln', "https://invidious.toot.koeln",
'https://invidious.ggc-project.de', "https://invidious.ggc-project.de",
'http://kgg2m7yk5aybusll.onion', "http://kgg2m7yk5aybusll.onion",
'http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion', "http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion",
'http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion', "http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion",
'http://qklhadlycap4cnod.onion', "http://qklhadlycap4cnod.onion",
'http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion', "http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion",
'http://mfqczy4mysscub2s.onion' "http://mfqczy4mysscub2s.onion",
]; ];
const bibliogramInstances = [ const bibliogramInstances = [
'https://bibliogram.art', "https://bibliogram.art",
'https://bibliogram.snopyta.org', "https://bibliogram.snopyta.org",
'https://bibliogram.pussthecat.org', "https://bibliogram.pussthecat.org",
'https://bibliogram.nixnet.services', "https://bibliogram.nixnet.services",
'https://bibliogram.hamster.dance', "https://bibliogram.hamster.dance",
'https://insta.maisputain.ovh', "https://insta.maisputain.ovh",
'https://bibliogram.ggc-project.de' "https://bibliogram.ggc-project.de",
];
const osmInstances = [
'https://openstreetmap.org'
]; ];
const osmInstances = ["https://openstreetmap.org"];
const autocompletes = [ const autocompletes = [
{ id: 'nitter-instance', instances: nitterInstances }, { id: "nitter-instance", instances: nitterInstances },
{ id: 'invidious-instance', instances: invidiousInstances }, { id: "invidious-instance", instances: invidiousInstances },
{ id: 'bibliogram-instance', instances: bibliogramInstances }, { id: "bibliogram-instance", instances: bibliogramInstances },
{ id: 'osm-instance', instances: osmInstances } { id: "osm-instance", instances: osmInstances },
]; ];
let nitterInstance = document.getElementById('nitter-instance'); let nitterInstance = document.getElementById("nitter-instance");
let invidiousInstance = document.getElementById('invidious-instance'); let invidiousInstance = document.getElementById("invidious-instance");
let bibliogramInstance = document.getElementById('bibliogram-instance'); let bibliogramInstance = document.getElementById("bibliogram-instance");
let osmInstance = document.getElementById('osm-instance'); let osmInstance = document.getElementById("osm-instance");
let disableNitter = document.getElementById('disable-nitter'); let disableNitter = document.getElementById("disable-nitter");
let disableInvidious = document.getElementById('disable-invidious'); let disableInvidious = document.getElementById("disable-invidious");
let disableBibliogram = document.getElementById('disable-bibliogram'); let disableBibliogram = document.getElementById("disable-bibliogram");
let disableOsm = document.getElementById('disable-osm'); let disableOsm = document.getElementById("disable-osm");
let alwaysProxy = document.getElementById('always-proxy'); let alwaysProxy = document.getElementById("always-proxy");
let onlyEmbeddedVideo = document.getElementById('only-embed'); let onlyEmbeddedVideo = document.getElementById("only-embed");
let videoQuality = document.getElementById('video-quality'); let videoQuality = document.getElementById("video-quality");
let removeTwitterSW = document.getElementById('remove-twitter-sw'); let removeTwitterSW = document.getElementById("remove-twitter-sw");
let invidiousDarkMode = document.getElementById('invidious-dark-mode'); let invidiousDarkMode = document.getElementById("invidious-dark-mode");
let persistInvidiousPrefs = document.getElementById('persist-invidious-prefs'); let persistInvidiousPrefs = document.getElementById("persist-invidious-prefs");
let invidiousVolume = document.getElementById('invidious-volume'); let invidiousVolume = document.getElementById("invidious-volume");
let invidiousPlayerStyle = document.getElementById('invidious-player-style'); let invidiousPlayerStyle = document.getElementById("invidious-player-style");
let invidiousSubtitles = document.getElementById('invidious-subtitles'); let invidiousSubtitles = document.getElementById("invidious-subtitles");
let invidiousAutoplay = document.getElementById('invidious-autoplay'); let invidiousAutoplay = document.getElementById("invidious-autoplay");
let theme = document.getElementById("theme");
let exceptions; let exceptions;
window.browser = window.browser || window.chrome; window.browser = window.browser || window.chrome;
function prependExceptionsItem(item, index) { function prependExceptionsItem(item, index) {
const li = document.createElement('li'); const li = document.createElement("li");
li.appendChild(document.createTextNode(item.toString())); li.appendChild(document.createTextNode(item.toString()));
const button = document.createElement('button'); const button = document.createElement("button");
li.appendChild(button); li.appendChild(button);
document.getElementById('exceptions-items').prepend(li); document.getElementById("exceptions-items").prepend(li);
const svg = const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
`<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
<line x1='368' y1='368' x2='144' y2='144' <line x1='368' y1='368' x2='144' y2='144'
style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' /> style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
<line x1='368' y1='144' x2='144' y2='368' <line x1='368' y1='144' x2='144' y2='368'
style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' /> style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
</svg>`; </svg>`;
button.innerHTML = svg; button.innerHTML = svg;
button.addEventListener('click', () => { button.addEventListener("click", () => {
exceptions.splice(index, 1); exceptions.splice(index, 1);
browser.storage.sync.set({ browser.storage.sync.set({
exceptions: exceptions exceptions: exceptions,
}); });
li.remove(); li.remove();
}); });
@ -97,108 +95,112 @@ function prependExceptionsItem(item, index) {
browser.storage.sync.get( browser.storage.sync.get(
[ [
'nitterInstance', "nitterInstance",
'invidiousInstance', "invidiousInstance",
'bibliogramInstance', "bibliogramInstance",
'osmInstance', "osmInstance",
'disableNitter', "disableNitter",
'disableInvidious', "disableInvidious",
'disableBibliogram', "disableBibliogram",
'disableOsm', "disableOsm",
'alwaysProxy', "alwaysProxy",
'onlyEmbeddedVideo', "onlyEmbeddedVideo",
'videoQuality', "videoQuality",
'removeTwitterSW', "removeTwitterSW",
'invidiousDarkMode', "invidiousDarkMode",
'persistInvidiousPrefs', "persistInvidiousPrefs",
'invidiousVolume', "invidiousVolume",
'invidiousPlayerStyle', "invidiousPlayerStyle",
'invidiousSubtitles', "invidiousSubtitles",
'invidiousAutoplay', "invidiousAutoplay",
'exceptions' "exceptions",
"theme",
], ],
result => { (result) => {
nitterInstance.value = result.nitterInstance || ''; theme.value = result.theme || "";
invidiousInstance.value = result.invidiousInstance || ''; if (result.theme) document.body.classList.add(result.theme);
bibliogramInstance.value = result.bibliogramInstance || ''; nitterInstance.value = result.nitterInstance || "";
osmInstance.value = result.osmInstance || ''; invidiousInstance.value = result.invidiousInstance || "";
bibliogramInstance.value = result.bibliogramInstance || "";
osmInstance.value = result.osmInstance || "";
disableNitter.checked = !result.disableNitter; disableNitter.checked = !result.disableNitter;
disableInvidious.checked = !result.disableInvidious; disableInvidious.checked = !result.disableInvidious;
disableBibliogram.checked = !result.disableBibliogram; disableBibliogram.checked = !result.disableBibliogram;
disableOsm.checked = !result.disableOsm; disableOsm.checked = !result.disableOsm;
alwaysProxy.checked = result.alwaysProxy; alwaysProxy.checked = result.alwaysProxy;
onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo; onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
videoQuality.value = result.videoQuality || ''; videoQuality.value = result.videoQuality || "";
removeTwitterSW.checked = !result.removeTwitterSW; removeTwitterSW.checked = !result.removeTwitterSW;
invidiousDarkMode.checked = result.invidiousDarkMode; invidiousDarkMode.checked = result.invidiousDarkMode;
persistInvidiousPrefs.checked = result.persistInvidiousPrefs; persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
exceptions = result.exceptions || []; exceptions = result.exceptions || [];
exceptions.forEach(prependExceptionsItem); exceptions.forEach(prependExceptionsItem);
invidiousVolume.value = result.invidiousVolume; invidiousVolume.value = result.invidiousVolume;
invidiousPlayerStyle.value = result.invidiousPlayerStyle; invidiousPlayerStyle.value = result.invidiousPlayerStyle || "";
invidiousSubtitles.value = result.invidiousSubtitles || ''; invidiousSubtitles.value = result.invidiousSubtitles || "";
invidiousAutoplay.checked = !result.invidiousAutoplay; invidiousAutoplay.checked = !result.invidiousAutoplay;
} }
); );
function openTab(tab, event) { function openTab(tab, event) {
let i, tabcontent, tablinks; let i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName('tabcontent'); tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) { for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = 'none'; tabcontent[i].style.display = "none";
} }
tablinks = document.getElementsByClassName('tablinks'); tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) { for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(' active', ''); tablinks[i].className = tablinks[i].className.replace(" active", "");
} }
document.getElementById(tab).style.display = 'block'; document.getElementById(tab).style.display = "block";
event.currentTarget.className += ' active'; event.currentTarget.className += " active";
} }
document.getElementById('general-tab').addEventListener( document
'click', openTab.bind(null, 'general') .getElementById("general-tab")
); .addEventListener("click", openTab.bind(null, "general"));
document.getElementById('advanced-tab').addEventListener( document
'click', openTab.bind(null, 'advanced') .getElementById("advanced-tab")
); .addEventListener("click", openTab.bind(null, "advanced"));
document.getElementById('exceptions-tab').addEventListener( document
'click', openTab.bind(null, 'exceptions') .getElementById("exceptions-tab")
); .addEventListener("click", openTab.bind(null, "exceptions"));
document.getElementById('general-tab').click(); document.getElementById("general-tab").click();
function addToExceptions() { function addToExceptions() {
const input = document.getElementById('new-exceptions-item'); const input = document.getElementById("new-exceptions-item");
const type = document.querySelector('input[name="type"]:checked').value; const type = document.querySelector('input[name="type"]:checked').value;
if (input.value) { if (input.value) {
try { try {
let value = input.value; let value = input.value;
new RegExp(input.value); new RegExp(input.value);
if (type === 'URL') { if (type === "URL") {
value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
} }
exceptions.push(value); exceptions.push(value);
browser.storage.sync.set({ browser.storage.sync.set({
exceptions: exceptions exceptions: exceptions,
}); });
prependExceptionsItem(value, exceptions.indexOf(value)); prependExceptionsItem(value, exceptions.indexOf(value));
input.value = ''; input.value = "";
} catch (error) { } catch (error) {
input.setCustomValidity('Invalid RegExp'); input.setCustomValidity("Invalid RegExp");
} }
} else { } else {
input.setCustomValidity('Invalid RegExp'); input.setCustomValidity("Invalid RegExp");
} }
} }
document.getElementById('add-to-exceptions').addEventListener( document
'click', addToExceptions .getElementById("add-to-exceptions")
); .addEventListener("click", addToExceptions);
function debounce(func, wait, immediate) { function debounce(func, wait, immediate) {
let timeout; let timeout;
return () => { return () => {
let context = this, args = arguments; let context = this,
args = arguments;
let later = () => { let later = () => {
timeout = null; timeout = null;
if (!immediate) func.apply(context, args); if (!immediate) func.apply(context, args);
@ -208,132 +210,152 @@ function debounce(func, wait, immediate) {
timeout = setTimeout(later, wait); timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args); if (callNow) func.apply(context, args);
}; };
}; }
function parseURL(urlString) { function parseURL(urlString) {
if (urlString) { if (urlString) {
try { try {
const url = new URL(urlString); const url = new URL(urlString);
if (url.username && url.password) { if (url.username && url.password) {
return `${url.protocol}//${url.username}:${url.password}@${url.host}` return `${url.protocol}//${url.username}:${url.password}@${url.host}`;
} else { } else {
return url.origin; return url.origin;
} }
} catch (error) { } catch (error) {
console.log(error); console.log(error);
return ''; return "";
} }
} else { } else {
return ''; return "";
} }
} }
let nitterInstanceChange = debounce(() => { let nitterInstanceChange = debounce(() => {
if (nitterInstance.checkValidity()) { if (nitterInstance.checkValidity()) {
browser.storage.sync.set({ browser.storage.sync.set({
nitterInstance: parseURL(nitterInstance.value) nitterInstance: parseURL(nitterInstance.value),
}); });
} }
}, 500); }, 500);
nitterInstance.addEventListener('input', nitterInstanceChange); nitterInstance.addEventListener("input", nitterInstanceChange);
let invidiousInstanceChange = debounce(() => { let invidiousInstanceChange = debounce(() => {
if (invidiousInstance.checkValidity()) { if (invidiousInstance.checkValidity()) {
browser.storage.sync.set({ browser.storage.sync.set({
invidiousInstance: parseURL(invidiousInstance.value) invidiousInstance: parseURL(invidiousInstance.value),
}); });
} }
}, 500); }, 500);
invidiousInstance.addEventListener('input', invidiousInstanceChange); invidiousInstance.addEventListener("input", invidiousInstanceChange);
let bibliogramInstanceChange = debounce(() => { let bibliogramInstanceChange = debounce(() => {
if (bibliogramInstance.checkValidity()) { if (bibliogramInstance.checkValidity()) {
browser.storage.sync.set({ browser.storage.sync.set({
bibliogramInstance: parseURL(bibliogramInstance.value) bibliogramInstance: parseURL(bibliogramInstance.value),
}); });
} }
}, 500); }, 500);
bibliogramInstance.addEventListener('input', bibliogramInstanceChange); bibliogramInstance.addEventListener("input", bibliogramInstanceChange);
let osmInstanceChange = debounce(() => { let osmInstanceChange = debounce(() => {
if (osmInstance.checkValidity()) { if (osmInstance.checkValidity()) {
browser.storage.sync.set({ browser.storage.sync.set({
osmInstance: parseURL(osmInstance.value) osmInstance: parseURL(osmInstance.value),
}); });
} }
}, 500); }, 500);
osmInstance.addEventListener('input', osmInstanceChange); osmInstance.addEventListener("input", osmInstanceChange);
disableNitter.addEventListener('change', event => { disableNitter.addEventListener("change", (event) => {
browser.storage.sync.set({ disableNitter: !event.target.checked }); browser.storage.sync.set({ disableNitter: !event.target.checked });
}); });
disableInvidious.addEventListener('change', event => { disableInvidious.addEventListener("change", (event) => {
browser.storage.sync.set({ disableInvidious: !event.target.checked }); browser.storage.sync.set({ disableInvidious: !event.target.checked });
}); });
disableBibliogram.addEventListener('change', event => { disableBibliogram.addEventListener("change", (event) => {
browser.storage.sync.set({ disableBibliogram: !event.target.checked }); browser.storage.sync.set({ disableBibliogram: !event.target.checked });
}); });
disableOsm.addEventListener('change', event => { disableOsm.addEventListener("change", (event) => {
browser.storage.sync.set({ disableOsm: !event.target.checked }); browser.storage.sync.set({ disableOsm: !event.target.checked });
}); });
alwaysProxy.addEventListener('change', event => { alwaysProxy.addEventListener("change", (event) => {
browser.storage.sync.set({ alwaysProxy: event.target.checked }); browser.storage.sync.set({ alwaysProxy: event.target.checked });
}); });
onlyEmbeddedVideo.addEventListener('change', event => { onlyEmbeddedVideo.addEventListener("change", (event) => {
browser.storage.sync.set({ onlyEmbeddedVideo: event.target.checked }); browser.storage.sync.set({ onlyEmbeddedVideo: event.target.checked });
}); });
videoQuality.addEventListener('change', event => { videoQuality.addEventListener("change", (event) => {
browser.storage.sync.set({ browser.storage.sync.set({
videoQuality: event.target.options[videoQuality.selectedIndex].value videoQuality: event.target.options[videoQuality.selectedIndex].value,
}); });
}); });
removeTwitterSW.addEventListener('change', event => { removeTwitterSW.addEventListener("change", (event) => {
browser.storage.sync.set({ removeTwitterSW: !event.target.checked }); browser.storage.sync.set({ removeTwitterSW: !event.target.checked });
}); });
invidiousDarkMode.addEventListener('change', event => { invidiousDarkMode.addEventListener("change", (event) => {
browser.storage.sync.set({ invidiousDarkMode: event.target.checked }); browser.storage.sync.set({ invidiousDarkMode: event.target.checked });
}); });
persistInvidiousPrefs.addEventListener('change', event => { persistInvidiousPrefs.addEventListener("change", (event) => {
browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked }); browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked });
}); });
let invidiousVolumeChange = debounce(() => { let invidiousVolumeChange = debounce(() => {
if (invidiousInstance.checkValidity()) { if (invidiousInstance.checkValidity()) {
browser.storage.sync.set({ browser.storage.sync.set({
invidiousVolume: invidiousVolume.value invidiousVolume: invidiousVolume.value,
}); });
} }
}, 500); }, 500);
invidiousVolume.addEventListener('input', invidiousVolumeChange); invidiousVolume.addEventListener("input", invidiousVolumeChange);
invidiousPlayerStyle.addEventListener('change', event => { invidiousPlayerStyle.addEventListener("change", (event) => {
browser.storage.sync.set({ browser.storage.sync.set({
invidiousPlayerStyle: event.target.options[invidiousPlayerStyle.selectedIndex].value invidiousPlayerStyle:
event.target.options[invidiousPlayerStyle.selectedIndex].value,
}); });
}); });
let invidiousSubtitlesChange = debounce(() => { let invidiousSubtitlesChange = debounce(() => {
if (invidiousInstance.checkValidity()) { if (invidiousInstance.checkValidity()) {
browser.storage.sync.set({ browser.storage.sync.set({
invidiousSubtitles: invidiousSubtitles.value invidiousSubtitles: invidiousSubtitles.value,
}); });
} }
}, 500); }, 500);
invidiousSubtitles.addEventListener('input', invidiousSubtitlesChange); invidiousSubtitles.addEventListener("input", invidiousSubtitlesChange);
invidiousAutoplay.addEventListener('change', event => { invidiousAutoplay.addEventListener("change", (event) => {
browser.storage.sync.set({ invidiousAutoplay: !event.target.checked }); browser.storage.sync.set({ invidiousAutoplay: !event.target.checked });
}); });
theme.addEventListener("change", (event) => {
const value = event.target.options[theme.selectedIndex].value;
switch (value) {
case "dark-theme":
document.body.classList.add("dark-theme");
document.body.classList.remove("light-theme");
break;
case "light-theme":
document.body.classList.add("light-theme");
document.body.classList.remove("dark-theme");
break;
default:
document.body.classList.remove("light-theme");
document.body.classList.remove("dark-theme");
}
browser.storage.sync.set({
theme: value,
});
});
function autocomplete(input, list) { function autocomplete(input, list) {
let currentFocus; let currentFocus;
@ -342,7 +364,9 @@ function autocomplete(input, list) {
}); });
input.addEventListener("input", (e) => { input.addEventListener("input", (e) => {
const val = e.target.value; const val = e.target.value;
if (!val) { return false; } if (!val) {
return false;
}
currentFocus = -1; currentFocus = -1;
showOptions(e); showOptions(e);
}); });
@ -363,7 +387,10 @@ function autocomplete(input, list) {
} }
}); });
function showOptions(e) { function showOptions(e) {
let a, b, i, val = e.target.value; let a,
b,
i,
val = e.target.value;
closeAllLists(); closeAllLists();
a = document.createElement("div"); a = document.createElement("div");
a.setAttribute("id", e.target.id + "autocomplete-list"); a.setAttribute("id", e.target.id + "autocomplete-list");
@ -377,7 +404,7 @@ function autocomplete(input, list) {
b.innerHTML += "<input type='hidden' value='" + list[i] + "'>"; b.innerHTML += "<input type='hidden' value='" + list[i] + "'>";
b.addEventListener("click", function (e) { b.addEventListener("click", function (e) {
input.value = e.target.getElementsByTagName("input")[0].value; input.value = e.target.getElementsByTagName("input")[0].value;
input.dispatchEvent(new Event('input')); input.dispatchEvent(new Event("input"));
closeAllLists(); closeAllLists();
}); });
a.appendChild(b); a.appendChild(b);
@ -388,7 +415,7 @@ function autocomplete(input, list) {
if (!x) return false; if (!x) return false;
removeActive(x); removeActive(x);
if (currentFocus >= x.length) currentFocus = 0; if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1); if (currentFocus < 0) currentFocus = x.length - 1;
x[currentFocus].classList.add("autocomplete-active"); x[currentFocus].classList.add("autocomplete-active");
} }
function removeActive(x) { function removeActive(x) {
@ -405,7 +432,7 @@ function autocomplete(input, list) {
} }
} }
document.addEventListener("click", (e) => { document.addEventListener("click", (e) => {
if (!autocompletes.find(element => element.id === e.target.id)) { if (!autocompletes.find((element) => element.id === e.target.id)) {
closeAllLists(e.target); closeAllLists(e.target);
} }
}); });
@ -413,4 +440,4 @@ function autocomplete(input, list) {
autocompletes.forEach((value) => { autocompletes.forEach((value) => {
autocomplete(document.getElementById(value.id), value.instances); autocomplete(document.getElementById(value.id), value.instances);
}) });

129
pages/popup/popup.html
View File

@ -1,19 +1,23 @@
<!doctype html> <!DOCTYPE html>
<html> <html>
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title> <title></title>
<link href="../styles.css" rel="stylesheet"> <link href="../styles.css" rel="stylesheet" />
</head> </head>
<body class="popup"> <body class="popup">
<header> <header class="popup">
<div class="logo-container"> <div class="logo-container">
<img src="../../assets/images/icon128.png" alt="Privacy Redirect logo"> <img
<h1><span data-localize="__MSG_privacy__" class="privacy">Privacy</span><br><span src="../../assets/images/icon128.png"
data-localize="__MSG_redirect__">Redirect</span></h1> alt="Privacy Redirect logo"
/>
<h1>
<span data-localize="__MSG_privacy__" class="privacy">Privacy</span
><br /><span data-localize="__MSG_redirect__">Redirect</span>
</h1>
</div> </div>
<div class="version"> <div class="version">
<span>Version:&nbsp;<span id="version"></span></span> <span>Version:&nbsp;<span id="version"></span></span>
@ -28,7 +32,12 @@
<h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1> <h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp; <input
aria-hidden="true"
id="disable-nitter"
type="checkbox"
checked
/>&nbsp;
<label for="disable-nitter" class="checkbox-label"></label> <label for="disable-nitter" class="checkbox-label"></label>
</td> </td>
</tr> </tr>
@ -41,12 +50,18 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_disableInvidious__">Invidious Redirects</h1> <h1 data-localize="__MSG_disableInvidious__">
Invidious Redirects
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp; <input
<label for="disable-invidious" class="checkbox-label"> aria-hidden="true"
</label> id="disable-invidious"
type="checkbox"
checked
/>&nbsp;
<label for="disable-invidious" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -58,12 +73,18 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_disableBibliogram__">Bibliogram Redirects</h1> <h1 data-localize="__MSG_disableBibliogram__">
Bibliogram Redirects
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp; <input
<label for="disable-bibliogram" class="checkbox-label"> aria-hidden="true"
</label> id="disable-bibliogram"
type="checkbox"
checked
/>&nbsp;
<label for="disable-bibliogram" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -75,37 +96,73 @@
<tbody> <tbody>
<tr> <tr>
<td> <td>
<h1 data-localize="__MSG_disableOsm__">OpenStreetMap Redirects</h1> <h1 data-localize="__MSG_disableOsm__">
OpenStreetMap Redirects
</h1>
</td> </td>
<td> <td>
<input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp; <input
<label for="disable-osm" class="checkbox-label"> aria-hidden="true"
</label> id="disable-osm"
type="checkbox"
checked
/>&nbsp;
<label for="disable-osm" class="checkbox-label"> </label>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </section>
<section class="settings-block"> <section class="settings-block"></section>
</section>
<footer> <footer>
<a class="button" id="more-options"> <a class="button" id="more-options">
<span data-localize="__MSG_moreOptions__">More Options&nbsp;</span> <span data-localize="__MSG_moreOptions__">More Options&nbsp;</span>
<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'> <svg
<path d='M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48' xmlns="http://www.w3.org/2000/svg"
style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' /> width="512"
<polyline points='336 64 448 64 448 176' height="512"
style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' /> viewBox="0 0 512 512"
<line x1='224' y1='288' x2='440' y2='72' >
style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' /> <path
d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48"
style="
fill: none;
stroke: inherit;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 32px;
"
/>
<polyline
points="336 64 448 64 448 176"
style="
fill: none;
stroke: inherit;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 32px;
"
/>
<line
x1="224"
y1="288"
x2="440"
y2="72"
style="
fill: none;
stroke: inherit;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 32px;
"
/>
</svg> </svg>
</a> </a>
</footer> </footer>
<script src="./popup.js"></script> <script src="./popup.js"></script>
<script src="../../assets/javascript/localise.js"></script> <script src="../../assets/javascript/localise.js"></script>
</body> </body>
</html> </html>

34
pages/popup/popup.js
View File

@ -1,21 +1,23 @@
'use strict'; "use strict";
let disableNitter = document.querySelector('#disable-nitter'); let disableNitter = document.querySelector("#disable-nitter");
let disableInvidious = document.querySelector('#disable-invidious'); let disableInvidious = document.querySelector("#disable-invidious");
let disableBibliogram = document.querySelector('#disable-bibliogram'); let disableBibliogram = document.querySelector("#disable-bibliogram");
let disableOsm = document.querySelector('#disable-osm'); let disableOsm = document.querySelector("#disable-osm");
let version = document.querySelector('#version'); let version = document.querySelector("#version");
window.browser = window.browser || window.chrome; window.browser = window.browser || window.chrome;
browser.storage.sync.get( browser.storage.sync.get(
[ [
'disableNitter', "disableNitter",
'disableInvidious', "disableInvidious",
'disableBibliogram', "disableBibliogram",
'disableOsm' "disableOsm",
"theme",
], ],
result => { (result) => {
document.body.classList.add(result.theme);
disableNitter.checked = !result.disableNitter; disableNitter.checked = !result.disableNitter;
disableInvidious.checked = !result.disableInvidious; disableInvidious.checked = !result.disableInvidious;
disableBibliogram.checked = !result.disableBibliogram; disableBibliogram.checked = !result.disableBibliogram;
@ -25,22 +27,22 @@ browser.storage.sync.get(
version.textContent = browser.runtime.getManifest().version; version.textContent = browser.runtime.getManifest().version;
disableNitter.addEventListener('change', event => { disableNitter.addEventListener("change", (event) => {
browser.storage.sync.set({ disableNitter: !event.target.checked }); browser.storage.sync.set({ disableNitter: !event.target.checked });
}); });
disableInvidious.addEventListener('change', event => { disableInvidious.addEventListener("change", (event) => {
browser.storage.sync.set({ disableInvidious: !event.target.checked }); browser.storage.sync.set({ disableInvidious: !event.target.checked });
}); });
disableBibliogram.addEventListener('change', event => { disableBibliogram.addEventListener("change", (event) => {
browser.storage.sync.set({ disableBibliogram: !event.target.checked }); browser.storage.sync.set({ disableBibliogram: !event.target.checked });
}); });
disableOsm.addEventListener('change', event => { disableOsm.addEventListener("change", (event) => {
browser.storage.sync.set({ disableOsm: !event.target.checked }); browser.storage.sync.set({ disableOsm: !event.target.checked });
}); });
document.querySelector('#more-options').addEventListener('click', () => { document.querySelector("#more-options").addEventListener("click", () => {
browser.runtime.openOptionsPage(); browser.runtime.openOptionsPage();
}); });

182
pages/styles.css
View File

@ -1,31 +1,41 @@
:root { body {
--text-main: #fff; --text: #fff;
--text-secondary: #000; --bg-main: #3c4043;
--dark: #3c4043; --bg-secondary: #292a2d;
--darker: #292a2d;
--light: #e3e7ea;
--lighter: #fff;
--active: #ff5b56; --active: #ff5b56;
--space: 5px; --space: 5px;
--danger: #f04141; --danger: #f04141;
--danger-light: #f9d0d5; --danger-light: #f9d0d5;
--dark-grey: #767676;
--light-grey: #c3c3c3;
}
body.light-theme {
--text: #000;
--bg-main: #e3e7ea;
--bg-secondary: #fff;
}
.light-theme.popup,
.light-theme .popup {
background-color: var(--bg-secondary);
} }
body { body {
color: var(--text-secondary);
margin: 0; margin: 0;
max-width: 400px; max-width: 400px;
margin: auto; margin: auto;
min-height: 572px; min-height: 572px;
font-family: Sans-Serif; font-family: Sans-Serif;
background-color: var(--darker); background-color: var(--bg-secondary);
color: var(--text);
} }
.popup { .popup {
width: 300px; width: 300px;
min-height: auto; min-height: auto;
overflow: hidden; overflow: hidden;
background-color: var(--dark); background-color: var(--bg-main);
} }
input { input {
@ -35,8 +45,8 @@ input {
} }
header { header {
background-color: var(--lighter); background-color: var(--bg-main);
color: var(--text-secondary); color: var(--text);
display: flex; display: flex;
padding: var(--space); padding: var(--space);
} }
@ -95,7 +105,7 @@ h3 {
h1, h1,
h2 { h2 {
color: var(--text-main); color: var(--text);
} }
footer { footer {
@ -112,6 +122,9 @@ select {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: var(--space); margin-bottom: var(--space);
background-color: var(--bg-main);
border-style: inset;
color: var(--text);
} }
input[type="url"] { input[type="url"] {
@ -136,7 +149,7 @@ input[type="radio"]:checked + label {
margin-left: 5px; margin-left: 5px;
background: grey; background: grey;
border-radius: 25px; border-radius: 25px;
color: var(--text-main); color: var(--text);
cursor: pointer; cursor: pointer;
display: block; display: block;
float: right; float: right;
@ -148,7 +161,7 @@ input[type="radio"]:checked + label {
} }
.checkbox-label:after { .checkbox-label:after {
background: var(--text-main); background: white;
border-radius: 90px; border-radius: 90px;
content: ""; content: "";
height: 20px; height: 20px;
@ -179,8 +192,8 @@ input:checked + label:after {
.button { .button {
border: var(--active) solid 1px; border: var(--active) solid 1px;
color: var(--text-main); color: var(--text);
stroke: var(--text-main); stroke: var(--text);
display: block; display: block;
font-size: 12px; font-size: 12px;
font-weight: bold; font-weight: bold;
@ -199,13 +212,13 @@ input:checked + label:after {
.button:hover { .button:hover {
background-color: var(--active); background-color: var(--active);
color: var(--text-main); color: var(--text);
stroke: var(--text-main); stroke: var(--text);
} }
.button:active { .button:active {
background-color: var(--active); background-color: var(--active);
box-shadow: 0 var(--space) var(--dark); box-shadow: 0 var(--space) var(--bg-main);
transform: translateY(4px); transform: translateY(4px);
} }
@ -221,13 +234,13 @@ input:invalid {
.tab { .tab {
overflow: hidden; overflow: hidden;
background-color: var(--darker); background-color: var(--bg-secondary);
} }
.tab button { .tab button {
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
color: var(--text-main); color: var(--text);
background-color: inherit; background-color: inherit;
float: left; float: left;
border: none; border: none;
@ -235,7 +248,7 @@ input:invalid {
cursor: pointer; cursor: pointer;
padding: 14px 16px; padding: 14px 16px;
transition: 0.3s; transition: 0.3s;
border: solid 1px var(--dark); border: solid 1px var(--bg-main);
width: 33.333%; width: 33.333%;
font-size: 14px; font-size: 14px;
} }
@ -245,13 +258,13 @@ input:invalid {
} }
.tab button.active { .tab button.active {
background-color: var(--dark); background-color: var(--bg-main);
} }
.tabcontent { .tabcontent {
padding-top: 10px; padding-top: 10px;
display: none; display: none;
background-color: var(--dark); background-color: var(--bg-main);
min-height: 510px; min-height: 510px;
} }
@ -268,7 +281,7 @@ div.exceptions > input {
float: right; float: right;
border: var(--active) solid 1px; border: var(--active) solid 1px;
background-color: var(--active); background-color: var(--active);
color: var(--text-main); color: var(--text);
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
@ -284,12 +297,12 @@ div.exceptions > input {
ul { ul {
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
color: var(--text-main); color: var(--text);
margin: 20px 20px 0 20px; margin: 20px 20px 0 20px;
} }
li { li {
border-bottom: solid 0.5px var(--darker); border-bottom: solid 0.5px var(--bg-secondary);
padding: 20px 0px 20px 20px; padding: 20px 0px 20px 20px;
} }
@ -298,7 +311,7 @@ li {
margin-right: -5px; margin-right: -5px;
border: var(--active) solid 1px; border: var(--active) solid 1px;
background-color: var(--active); background-color: var(--active);
color: var(--text-main); color: var(--text);
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
border-radius: 50%; border-radius: 50%;
@ -322,22 +335,25 @@ li {
.autocomplete-items { .autocomplete-items {
position: absolute; position: absolute;
border: 1px solid var(--dark); border: 1px solid var(--bg-main);
border-bottom: none; border-bottom: none;
border-top: none; border-top: none;
z-index: 99; z-index: 99;
top: 85%; top: 85%;
left: 0; left: 0;
right: 0; right: 0;
overflow: auto; overflow-y: auto;
max-height: 175px; max-height: 175px;
color: var(--text);
overflow-x: hidden;
max-width: 380px;
} }
.autocomplete-items div { .autocomplete-items div {
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
background-color: var(--darker); background-color: var(--bg-secondary);
border-bottom: 1px solid var(--dark); border-bottom: 1px solid var(--bg-main);
} }
.autocomplete-items div:hover { .autocomplete-items div:hover {
@ -346,7 +362,7 @@ li {
.autocomplete-active { .autocomplete-active {
background-color: var(--active); background-color: var(--active);
color: var(--lighter); color: var(--text);
} }
.option { .option {
@ -371,15 +387,15 @@ input[type="range"]::-webkit-slider-runnable-track {
width: 100%; width: 100%;
height: 8.4px; height: 8.4px;
cursor: pointer; cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border-color: var(--dark-grey), var(--light-grey);
background: var(--light); background: var(--bg-main);
border-radius: 1.3px; border-radius: 1.3px;
border: 0.2px solid #010101; border: 0.2px inset var(--dark-grey);
} }
input[type="range"]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border-color: var(--active);
border: 1px solid #000000; border: 1px solid var(--dark-grey);
height: 36px; height: 36px;
width: 16px; width: 16px;
border-radius: 3px; border-radius: 3px;
@ -390,22 +406,22 @@ input[type="range"]::-webkit-slider-thumb {
} }
input[type="range"]:focus::-webkit-slider-runnable-track { input[type="range"]:focus::-webkit-slider-runnable-track {
background: var(--light); background: var(--bg-main);
} }
input[type="range"]::-moz-range-track { input[type="range"]::-moz-range-track {
width: 100%; width: 100%;
height: 8.4px; height: 8.4px;
cursor: pointer; cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border-color: var(--dark-grey), var(--light-grey);
background: var(--light); background: var(--bg-main);
border-radius: 1.3px; border-radius: 1.3px;
border: 0.2px solid #010101; border: 0.2px inset var(--dark-grey);
} }
input[type="range"]::-moz-range-thumb { input[type="range"]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; border-color: var(--active);
border: 1px solid #000000; border: 1px solid var(--dark-grey);
height: 36px; height: 36px;
width: 16px; width: 16px;
border-radius: 3px; border-radius: 3px;
@ -413,73 +429,31 @@ input[type="range"]::-moz-range-thumb {
cursor: pointer; cursor: pointer;
} }
@media (prefers-color-scheme: dark) { ::placeholder {
body.popup, color: var(--text);
header,
h1,
input,
select,
div.tabcontent,
button.tablinks.active {
background-color: var(--dark);
color: var(--text-main);
}
body {
background-color: var(--darker);
}
a.button {
color: var(--text-main);
}
::placeholder {
color: var(--text-main);
opacity: 0.7; opacity: 0.7;
} }
*:focus {
outline: var(--active) solid 2px;
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
body.popup,
header,
h1,
input,
select,
div.tabcontent,
button.tablinks.active,
ul {
background-color: var(--lighter);
color: var(--text-secondary);
}
body { body {
background-color: var(--light); --text: #000;
--text-secondary: #fff;
--bg-main: #e3e7ea;
--bg-secondary: #fff;
} }
a.button { body.dark-theme {
color: var(--text-secondary); --text: #fff;
stroke: var(--text-secondary); --text-secondary: #000;
--bg-main: #3c4043;
--bg-secondary: #292a2d;
} }
button.tablinks { .popup {
background-color: var(--light); background-color: var(--bg-secondary);
color: var(--text-secondary);
}
::placeholder {
color: var(--text-secondary);
opacity: 0.7;
}
.tab button {
border-bottom: solid 1px var(--light);
}
button.tablinks.active {
border-bottom: solid 1px var(--lighter);
}
.autocomplete-items div {
background-color: var(--light);
} }
} }