Updating and Cleaning UI #9

This commit is contained in:
ManeraKai 2022-01-27 14:58:10 +03:00 committed by GitHub
parent 7c4d48655d
commit 155eddbf07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 576 additions and 1048 deletions

View File

@ -1,6 +1,6 @@
{
"extensionName": {
"message": "Privacy Redirect",
"message": "LibRedirect",
"description": "Name of the extension."
},
"extensionDescription": {

View File

@ -1,6 +1,6 @@
{
"extensionName": {
"message": "Privacy Redirect",
"message": "LibRedirect",
"description": "Nombre de la extensión."
},
"extensionDescription": {

View File

@ -1,6 +1,6 @@
{
"extensionName": {
"message": "Privacy Redirect",
"message": "LibRedirect",
"description": "Nom du module complémentaire."
},
"extensionDescription": {

View File

@ -1,6 +1,6 @@
{
"extensionName": {
"message": "Privacy Redirect",
"message": "LibRedirect",
"description": "Name of the extension."
},
"extensionDescription": {

View File

@ -1,6 +1,6 @@
{
"extensionName": {
"message": "Privacy Redirect",
"message": "LibRedirect",
"description": "Nazwa rozszerzenia."
},
"extensionDescription": {

View File

@ -1,6 +1,6 @@
{
"extensionName": {
"message": "Privacy Redirect",
"message": "LibRedirect",
"description": "Название расширения."
},
"extensionDescription": {

View File

@ -1,6 +1,6 @@
{
"extensionName": {
"message": "Privacy Redirect",
"message": "LibRedirect",
"description": "Uzantı ismi."
},
"extensionDescription": {

View File

@ -1,6 +1,6 @@
{
"extensionName": {
"message": "Privacy Redirect",
"message": "LibRedirect",
"description": "Name of the extension."
},
"extensionDescription": {

View File

@ -1,3 +1,3 @@
<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
<polyline points='112 184 256 328 400 184' style='fill:none;stroke:#FF5B56;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px'/>
<polyline points='112 184 256 328 400 184' style='fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px'/>
</svg>

Before

Width:  |  Height:  |  Size: 233 B

After

Width:  |  Height:  |  Size: 233 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 709 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 690 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

View File

@ -1,692 +1,323 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link href="../../assets/stylesheets/styles.css" rel="stylesheet" />
<title>Privacy Redirect Options</title>
</head>
<body>
<div class="tab">
<button
class="tablinks"
id="general-tab"
data-localise="__MSG_generalTab__"
>
General
</button>
<button
class="tablinks"
id="advanced-tab"
data-localise="__MSG_advancedTab__"
>
Advanced
</button>
<button
class="tablinks"
id="exceptions-tab"
data-localise="__MSG_exceptionsTab__"
>
Exceptions
</button>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link href="../stylesheets/styles.css" rel="stylesheet" />
<title>LibRedirect Options</title>
</head>
<body>
<div class="tab">
<button class="tablinks left" id="general-tab" data-localise="__MSG_generalTab__">
General
</button>
<button class="tablinks" id="advanced-tab" data-localise="__MSG_advancedTab__">
Advanced
</button>
<button class="tablinks right" id="exceptions-tab" data-localise="__MSG_exceptionsTab__">
Exceptions
</button>
</div>
<div id="general" class="tabcontent">
<div class="some-block">
<h4 data-localise="__MSG_theme__">Theme</h4>
<select id="theme">
<option value="">System</option>
<option value="light-theme">Light</option>
<option value="dark-theme">Dark</option>
</select>
</div>
<div id="general" class="tabcontent">
<div class="some-block">
<h4>Youtube (Invidious)</h4>
<input id="disable-invidious" type="checkbox" checked />
</div>
<section class="settings-block">
<div class="autocomplete">
<input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
placeholder="Random instance (none selected)" />
</div>
</section>
<div class="some-block">
<h4>Twitter (Nitter)</h4>
<input id="disable-nitter" type="checkbox" checked />
</div>
<section class="settings-block">
<div class="autocomplete">
<input id="nitter-instance" type="url" name="nitter-instance"
data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" />
</div>
</section>
<div class="some-block">
<h4>Instagram (Bibliogram)</h4>
<input id="disable-bibliogram" type="checkbox" checked />
</div>
<section class="settings-block">
<div class="autocomplete">
<input id="bibliogram-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
placeholder="Random instance (none selected)" />
</div>
</section>
<div class="some-block">
<h4>Reddit (LibReddit)</h4>
<input id="disable-reddit" type="checkbox" checked />
</div>
<section class="settings-block">
<div class="autocomplete">
<input id="reddit-instance" type="url" placeholder="https://libredd.it" />
</div>
</section>
<div class="some-block">
<h4>Search</h4>
<input id="disable-searchEngine" type="checkbox" checked />
</div>
<section class="settings-block">
<div class="autocomplete">
<input id="searchEngine-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
placeholder="Random instance (none selected)" />
</div>
</section>
<div class="some-block">
<h4>Translate (SimplyTranslate)</h4>
<input id="disable-simplyTranslate" type="checkbox" checked />
</div>
<section class="settings-block">
<div class="autocomplete">
<input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" />
</div>
</section>
<div class="some-block">
<h4>Maps (OpenStreetMaps)</h4>
<input id="disable-osm" type="checkbox" checked />
</div>
<section class="settings-block">
<div class="autocomplete">
<input id="osm-instance" type="url" placeholder="https://openstreetmap.org" />
</div>
</section>
<div class="some-block">
<h4>Wikipedia (Wikiless)</h4>
<input id="disable-wikipedia" type="checkbox" checked />
</div>
<section class="settings-block">
<div class="autocomplete">
<input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" />
</div>
</section>
<div class="some-block">
<h4>Medium (Scribe)</h4>
<input id="disable-scribe" type="checkbox" checked />
</div>
<section class="settings-block">
<div class="autocomplete">
<input id="scribe-instance" type="url" name="scribe-instance"
data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" />
</div>
</section>
<div class="buttons">
<a class="button" id="update-instances">
<span data-localise="__MSG_updateInstances__">Update Instances</span>
</a>
</div>
</div>
<div id="advanced" class="tabcontent">
<button type="button" class="collapsible">
Youtube (Invidious)
</button>
<div class="collapsible-content">
<section class="settings-block">
<table class="option" aria-label="Toggle Nitter redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableNitter__">Nitter Redirects</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-nitter"
type="checkbox"
checked
/>&nbsp;
<label for="disable-nitter" class="checkbox-label"></label>
</td>
</tr>
</tbody>
</table>
<h1 data-localise="__MSG_invidiousRandomPool__">
Invidious random instance pool (comma-separated)
</h1>
<textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" type="text"></textarea>
</section>
<div class="some-block">
<h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4>
<input id="use-freetube" type="checkbox" checked />
</div>
<div class="some-block">
<h4 data-localise="__MSG_alwaysProxy__">Always proxy videos through Invidious</h4>
<input id="always-proxy" type="checkbox" checked />
</div>
<div class="some-block">
<h4 data-localise="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4>
<input id="only-embed" type="checkbox" checked />
</div>
<section class="settings-block">
<table class="option" aria-label="Toggle Invidious redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableInvidious__">
Invidious Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-invidious"
type="checkbox"
checked
/>&nbsp;
<label for="disable-invidious" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Toggle Bibliogram redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableBibliogram__">
Bibliogram Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-bibliogram"
type="checkbox"
checked
/>&nbsp;
<label for="disable-bibliogram" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Toggle OpenStreetMap redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableOsm__">
OpenStreetMap Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-osm"
type="checkbox"
checked
/>&nbsp;
<label for="disable-osm" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Toggle Reddit redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableReddit__">
Reddit Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-reddit"
type="checkbox"
checked
/>&nbsp;
<label for="disable-reddit" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Toggle Scribe redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableScribe__">
Scribe Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-scribe"
type="checkbox"
checked
/>&nbsp;
<label for="disable-scribe" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Toggle Search Engine redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableSearchEngine__">
Search Engine Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-search-engine"
type="checkbox"
checked
/>&nbsp;
<label for="disable-search-engine" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Toggle SimplyTranslate redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableSimplyTranslate__">SimplyTranslate Redirects</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-simply-translate"
type="checkbox"
/>&nbsp;
<label for="disable-simply-translate" class="checkbox-label"></label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Toggle Wikipedia redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableWikipedia__">Wikipedia Redirects</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-wikipedia"
type="checkbox"
/>&nbsp;
<label for="disable-wikipedia" class="checkbox-label"></label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_nitterInstance__">Nitter Instance</h1>
<div class="autocomplete">
<input
id="nitter-instance"
type="url"
name="nitter-instance"
data-localise-placeholder="__MSG_randomInstancePlaceholder__"
placeholder="Random instance (none selected)"
/>
</div>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_invidiousInstance__">Invidious Instance</h1>
<div class="autocomplete">
<input
id="invidious-instance"
type="url"
data-localise-placeholder="__MSG_randomInstancePlaceholder__"
placeholder="Random instance (none selected)"
/>
</div>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_bibliogramInstance__">Bibliogram Instance</h1>
<div class="autocomplete">
<input
id="bibliogram-instance"
type="url"
data-localise-placeholder="__MSG_randomInstancePlaceholder__"
placeholder="Random instance (none selected)"
/>
</div>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_osmInstance__">OpenStreetMap Instance</h1>
<div class="autocomplete">
<input
id="osm-instance"
type="url"
placeholder="https://openstreetmap.org"
/>
</div>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_redditInstance__">Reddit Instance</h1>
<div class="autocomplete">
<input
id="reddit-instance"
type="url"
placeholder="https://libredd.it"
/>
</div>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_scribeInstance__"
class="new-badge" data-new-badge>Scribe Instance</h1>
<div class="autocomplete">
<input
id="scribe-instance"
type="url"
name="scribe-instance"
data-localise-placeholder="__MSG_randomInstancePlaceholder__"
placeholder="Random instance (none selected)"
/>
</div>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_searchEngineInstance__">Search Engine Instance</h1>
<div class="autocomplete">
<input
id="search-engine-instance"
type="url"
data-localise-placeholder="__MSG_randomInstancePlaceholder__"
placeholder="Random instance (none selected)"
/>
</div>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_simplyTranslateInstance__">SimplyTranslate Instance</h1>
<div class="autocomplete">
<input
id="simply-translate-instance"
type="url"
placeholder="https://translate.metalune.xyz"
/>
</div>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_wikipediaInstance__">Wikipedia Instance</h1>
<div class="autocomplete">
<input
id="wikipedia-instance"
type="url"
placeholder="https://wikiless.org"
/>
</div>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_theme__">Theme</h1>
<select id="theme">
<option value="">System</option>
<option value="light-theme">Light</option>
<option value="dark-theme">Dark</option>
<h1 data-localise="__MSG_videoQuality__">Invidious Video Quality</h1>
<select id="video-quality">
<option value="">Default</option>
<option value="hd720">720p</option>
<option value="medium">480p</option>
<option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
</option>
</select>
</section>
</div>
<div id="advanced" class="tabcontent">
<button type="button" class="collapsible">
Invidious
</button>
<div class="collapsible-content">
<section class="settings-block">
<h1 data-localise="__MSG_invidiousRandomPool__">
Invidious random instance pool (comma-separated)
</h1>
<input
id="invidious-random-pool"
name="invidious-random-pool"
type="text"
/>
</section>
<section class="settings-block">
<table
class="option"
aria-label="Redirect YouTube to FreeTube where possible"
>
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_useFreeTube__">
Use FreeTube over Invidious when possible
</h1>
</td>
<td>
<input
aria-hidden="true"
id="use-freetube"
type="checkbox"
checked
/>&nbsp;
<label for="use-freetube" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table
class="option"
aria-label="Always proxy videos through Invidious"
>
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_alwaysProxy__">
Always proxy videos through Invidious
</h1>
</td>
<td>
<input
aria-hidden="true"
id="always-proxy"
type="checkbox"
checked
/>&nbsp;
<label for="always-proxy" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table
class="option"
aria-label="Only redirect embedded video to Invidious"
>
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_onlyEmbeddedVideo__">
Only redirect embedded video to Invidious
</h1>
</td>
<td>
<input
aria-hidden="true"
id="only-embed"
type="checkbox"
checked
/>&nbsp;
<label for="only-embed" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_videoQuality__">Invidious Video Quality</h1>
<select id="video-quality">
<option value="">Default</option>
<option value="hd720">720p</option>
<option value="medium">480p</option>
<option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
</option>
</select>
</section>
<section class="settings-block">
<table class="option" aria-label="Invidious dark mode aways on">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_invidiousDarkMode__">
Invidious dark mode always on
</h1>
</td>
<td>
<input
aria-hidden="true"
id="invidious-dark-mode"
type="checkbox"
checked
/>&nbsp;
<label for="invidious-dark-mode" class="checkbox-label">
</label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_invidiousVolume__">
Invidious Volume
</h1>
<input
id="invidious-volume"
name="invidious-volume"
type="range"
min="0"
max="100"
step="1"
/><span id="volume-value"></span>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_invidiousPlayerStyle__">
Invidious Player Style
</h1>
<select id="invidious-player-style">
<option value="">Invidious</option>
<option value="youtube">YouTube</option>
</select>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_invidiousSubtitles__">
Invidious Subtitles - language codes (comma-separated)
</h1>
<input
id="invidious-subtitles"
name="invidious-subtitles"
type="text"
/>
</section>
<section class="settings-block">
<table
class="option"
aria-label="Invidious automatically play video on load"
>
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_invidiousAutoplay__">
Invidious automatically play video on load
</h1>
</td>
<td>
<input
aria-hidden="true"
id="invidious-autoplay"
type="checkbox"
checked
/>&nbsp;
<label for="invidious-autoplay" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Persist Invidious preferences">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_persistInvidiousPrefs__">
Persist Invidious preferences (as cookie)
</h1>
</td>
<td>
<input
aria-hidden="true"
id="persist-invidious-prefs"
type="checkbox"
checked
/>&nbsp;
<label for="persist-invidious-prefs" class="checkbox-label">
</label>
</td>
</tr>
</tbody>
</table>
</section>
<hr>
</div>
<button type="button" class="collapsible">
Nitter
</button>
<div class="collapsible-content">
<section class="settings-block">
<h1 data-localise="__MSG_nitterRandomPool__">
Nitter random instance pool (comma-separated)
</h1>
<input
id="nitter-random-pool"
name="nitter-random-pool"
type="text"
/>
</section>
<section class="settings-block">
<table
class="option"
aria-label="Proactively remove Twitter service worker"
>
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_removeTwitterSW__">
Proactively remove Twitter service worker
</h1>
</td>
<td>
<input
aria-hidden="true"
id="remove-twitter-sw"
type="checkbox"
checked
/>&nbsp;
<label for="remove-twitter-sw" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<hr>
</div>
<button type="button" class="collapsible">
Bibliogram
</button>
<div class="collapsible-content">
<section class="settings-block">
<h1 data-localise="__MSG_bibliogramRandomPool__">
Bibliogram random instance pool (comma-separated)
</h1>
<input
id="bibliogram-random-pool"
name="bibliogram-random-pool"
type="text"
/>
</section>
<section class="settings-block">
<h1 data-localise="__MSG_scribeRandomPool__">
Scribe random instance pool (comma-separated)
</h1>
<input
id="scribe-random-pool"
name="scribe-random-pool"
type="text"
/>
</section>
<hr>
</div>
</div>
<div id="exceptions" class="tabcontent">
<div class="some-block">
<h4 data-localise="__MSG_invidiousDarkMode__">Invidious dark mode always on</h4>
<input id="invidious-dark-mode" type="checkbox" checked />
</div>
<section class="settings-block">
<p data-localise="__MSG_exceptionsDescriptionP1__">
Enter a URL or Regular Expression to be excluded from redirects.
</p>
<p data-localise="__MSG_exceptionsDescriptionP2__">
All requests for or initiating from a URL that matches your exception
will be excluded from redirects.
</p>
<p data-localise="__MSG_exceptionsDescriptionP3__">
Note - Supports JavaScript regular expressions, excluding the
enclosing forward slashes.
</p>
<h1 data-localise="__MSG_invidiousVolume__">
Invidious Volume:&nbsp;<span id="volume-value"></span>
</h1>
<input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
</section>
<br>
<div class="some-block">
<h4 data-localise="__MSG_invidiousPlayerStyle__">Invidious Player Style</h4>
<select id="invidious-player-style">
<option value="">Invidious</option>
<option value="youtube">YouTube</option>
</select>
</div>
<section class="settings-block">
<table class="exceptions option">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_addException__">Add Exception</h1>
</td>
</tr>
<tr>
<td>
<input
id="new-exceptions-item"
type="text"
placeholder="URL or RegExp"
/>
</td>
<td>
<input type="radio" id="url" name="type" value="URL" checked />
<label class="radio" for="url">URL</label>
<input type="radio" id="regExp" name="type" value="RegExp" />
<label class="radio" for="regExp">RegExp</label>
</td>
<td>
<button id="add-to-exceptions">
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 512 512"
>
<line
x1="256"
y1="112"
x2="256"
y2="400"
style="
<h1 data-localise="__MSG_invidiousSubtitles__">
Invidious Subtitles - language codes (comma-separated)
</h1>
<input id="invidious-subtitles" name="invidious-subtitles" type="text" />
</section>
<div class="some-block">
<h4 data-localise="__MSG_invidiousAutoplay__">Invidious automatically play video on load</h4>
<input id="invidious-autoplay" type="checkbox" checked />
</div>
<div class="some-block">
<h4 data-localise="__MSG_persistInvidiousPrefs__">Persist Invidious preferences (as cookie)</h4>
<input id="persist-invidious-prefs" type="checkbox" checked />
</div>
</div>
<button type="button" class="collapsible">
Twitter (Nitter)
</button>
<div class="collapsible-content">
<section class="settings-block">
<h1 data-localise="__MSG_nitterRandomPool__">
Nitter random instance pool (comma-separated)
</h1>
<textarea id="nitter-random-pool" name="nitter-random-pool" type="text"></textarea>
</section>
<div class="some-block">
<h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4>
<input id="remove-twitter-sw" type="checkbox" checked />
</div>
</div>
<button type="button" class="collapsible">
Instagram (Bibliogram)
</button>
<div class="collapsible-content">
<section class="settings-block">
<h1 data-localise="__MSG_bibliogramRandomPool__">
Bibliogram random instance pool (comma-separated)
</h1>
<textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea>
</section>
</div>
<button type="button" class="collapsible">
Medium (Scribe)
</button>
<div class="collapsible-content">
<section class="settings-block">
<h1 data-localise="__MSG_scribeRandomPool__">
Scribe random instance pool (comma-separated)
</h1>
<textarea id="scribe-random-pool" name="scribe-random-pool" type="text"></textarea>
</section>
</div>
</div>
<div id="exceptions" class="tabcontent">
<section class="settings-block">
<p data-localise="__MSG_exceptionsDescriptionP1__">
Enter a URL or Regular Expression to be excluded from redirects.
</p>
<p data-localise="__MSG_exceptionsDescriptionP2__">
All requests for or initiating from a URL that matches your exception
will be excluded from redirects.
</p>
<p data-localise="__MSG_exceptionsDescriptionP3__">
Note - Supports JavaScript regular expressions, excluding the
enclosing forward slashes.
</p>
</section>
<section class="settings-block">
<table class="exceptions option">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_addException__">Add Exception</h1>
</td>
</tr>
<tr>
<td>
<input id="new-exceptions-item" type="text" placeholder="URL or RegExp" />
</td>
<td>
<input type="radio" id="url" name="type" value="URL" checked />
<label class="radio" for="url">URL</label>
<input type="radio" id="regExp" name="type" value="RegExp" />
<label class="radio" for="regExp">RegExp</label>
</td>
<td>
<button id="add-to-exceptions">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" 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="
" />
<line x1="400" y1="256" x2="112" y2="256" style="
fill: none;
stroke: #fff;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 32px;
"
/>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</section>
<ul id="exceptions-items"></ul>
</div>
" />
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</section>
<ul id="exceptions-items"></ul>
</div>
<script type="module" src="./options.js"></script>
<script src="../../assets/javascripts/localise.js"></script>
</body>
</html>
<script type="module" src="./options.js"></script>
<script src="../../assets/javascripts/localise.js"></script>
</body>
</html>

View File

@ -29,10 +29,8 @@ let bibliogramInstance = document.getElementById("bibliogram-instance");
let osmInstance = document.getElementById("osm-instance");
let redditInstance = document.getElementById("reddit-instance");
let scribeInstance = document.getElementById("scribe-instance");
let searchEngineInstance = document.getElementById("search-engine-instance");
let simplyTranslateInstance = document.getElementById(
"simply-translate-instance"
);
let searchEngineInstance = document.getElementById("searchEngine-instance");
let simplyTranslateInstance = document.getElementById("simplyTranslate-instance");
let wikipediaInstance = document.getElementById("wikipedia-instance");
let disableNitter = document.getElementById("disable-nitter");
let disableInvidious = document.getElementById("disable-invidious");
@ -40,9 +38,9 @@ let disableBibliogram = document.getElementById("disable-bibliogram");
let disableOsm = document.getElementById("disable-osm");
let disableReddit = document.getElementById("disable-reddit");
let disableScribe = document.getElementById("disable-scribe");
let disableSearchEngine = document.getElementById("disable-search-engine");
let disableSearchEngine = document.getElementById("disable-searchEngine");
let disableSimplyTranslate = document.getElementById(
"disable-simply-translate"
"disable-simplyTranslate"
);
let disableWikipedia = document.getElementById("disable-wikipedia");
let alwaysProxy = document.getElementById("always-proxy");
@ -177,22 +175,22 @@ browser.storage.sync.get(
result.scribeRandomPool ||
commonHelper.filterInstances(scribeInstances);
autocompletes = [
{ id: "nitter-instance", instances: nitterRandomPool.value.split(',') },
{ id: "invidious-instance", instances: invidiousRandomPool.value.split(',') },
{ id: "bibliogram-instance", instances: bibliogramRandomPool.value.split(',') },
{ id: "scribe-instance", instances: scribeRandomPool.value.split(',') },
{ id: "reddit-instance", instances: redditInstances },
{ id: "osm-instance", instances: osmInstances },
{
id: "search-engine-instance",
instances: searchEngineInstances.map((instance) => instance.link),
},
{ id: "simply-translate-instance", instances: simplyTranslateInstances },
{ id: "wikipedia-instance", instances: wikipediaInstances },
];
{ id: "nitter-instance", instances: nitterRandomPool.value.split(',') },
{ id: "invidious-instance", instances: invidiousRandomPool.value.split(',') },
{ id: "bibliogram-instance", instances: bibliogramRandomPool.value.split(',') },
{ id: "scribe-instance", instances: scribeRandomPool.value.split(',') },
{ id: "reddit-instance", instances: redditInstances },
{ id: "osm-instance", instances: osmInstances },
{
id: "searchEngine-instance",
instances: searchEngineInstances.map((instance) => instance.link),
},
{ id: "simplyTranslate-instance", instances: simplyTranslateInstances },
{ id: "wikipedia-instance", instances: wikipediaInstances },
];
autocompletes.forEach((value) => {
autocomplete(document.getElementById(value.id), value.instances);
});
});
}
);
@ -449,7 +447,7 @@ const invidiousVolumeChange = debounce(() => {
browser.storage.sync.set({
invidiousVolume: invidiousVolume.value,
});
}, 500);
}, 1);
invidiousVolume.addEventListener("input", invidiousVolumeChange);
invidiousPlayerStyle.addEventListener("change", (event) => {
@ -604,7 +602,6 @@ function autocomplete(input, list) {
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("collapsible-active");
@ -616,3 +613,20 @@ for (i = 0; i < coll.length; i++) {
}
});
}
const apiEndpoint = 'https://raw.githubusercontent.com/libredirect/instances/main/data.json';
document.querySelector("#update-instances").addEventListener("click", () => {
document.querySelector("#update-instances").innerHTML = '...';
let request = new XMLHttpRequest();
request.open('GET', apiEndpoint, false);
request.send(null);
if (request.status === 200) {
const instances = JSON.parse(request.responseText);
const nitterRandomPool = instances.twitter.join(',');
const invidiousRandomPool = instances.youtube.join(',');
const bibliogramRandomPool = instances.instagram.join(',');
browser.storage.sync.set({ nitterRandomPool, invidiousRandomPool, bibliogramRandomPool });
document.querySelector("#update-instances").innerHTML = 'Done!';
}
});

View File

@ -1,287 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link href="../../assets/stylesheets/styles.css" rel="stylesheet" />
</head>
<body class="popup">
<header class="popup">
<div class="logo-container">
<img
src="../../assets/images/libredirect.svg"
alt="Privacy Redirect logo"
/>
<h1>
<span data-localise="__MSG_extensionName__" class="extensionName">LibRedirect</span>
</h1>
</div>
<div class="version">
<span data-localise="__MSG_version__">Version</span>:&nbsp;<span
id="version"
></span>
</div>
</header>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link href="../stylesheets/styles.css" rel="stylesheet" />
</head>
<section class="settings-block">
<table class="option" aria-label="Toggle Nitter redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableNitter__">Twitter Redirects</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-nitter"
type="checkbox"
checked
/>&nbsp;
<label for="disable-nitter" class="checkbox-label"></label>
</td>
</tr>
</tbody>
</table>
</section>
<body class="popup">
<section class="settings-block">
<table class="option" aria-label="Toggle Invidious redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableInvidious__">
YouTube Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-invidious"
type="checkbox"
checked
/>&nbsp;
<label for="disable-invidious" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Toggle Bibliogram redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableBibliogram__">
Instagram Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-bibliogram"
type="checkbox"
checked
/>&nbsp;
<label for="disable-bibliogram" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<section class="settings-block">
<table class="option" aria-label="Toggle OpenStreetMap redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableOsm__">
GoogleMap Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-osm"
type="checkbox"
checked
/>&nbsp;
<label for="disable-osm" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<div class="some-block">
<h4>Youtube</h4>
<input id="disable-invidious" type="checkbox" checked />
</div>
<section class="settings-block">
<table class="option" aria-label="Toggle old Reddit redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableReddit__">Reddit Redirects</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-reddit"
type="checkbox"
checked
/>&nbsp;
<label for="disable-reddit" class="checkbox-label"> </label>
</td>
</tr>
</tbody>
</table>
</section>
<div class="some-block">
<h4>Twitter</h4>
<input id="disable-nitter" type="checkbox" checked />
</div>
<section class="settings-block">
<table class="option" aria-label="Toggle Search Engine redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableSearchEngine__">
Search Engine Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-searchEngine"
type="checkbox"
checked
/>&nbsp;
<label for="disable-searchEngine" class="checkbox-label"></label>
</td>
</tr>
</tbody>
</table>
</section>
<div class="some-block">
<h4>Instagram</h4>
<input id="disable-bibliogram" type="checkbox" checked />
</div>
<section class="settings-block">
<table class="option" aria-label="Toggle SimplyTranslate redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableSimplyTranslate__">
SimplyTranslate Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-simplyTranslate"
type="checkbox"
/>&nbsp;
<label
for="disable-simplyTranslate"
class="checkbox-label"
></label>
</td>
</tr>
</tbody>
</table>
</section>
<div class="some-block">
<h4>Reddit</h4>
<input id="disable-reddit" type="checkbox" checked />
</div>
<section class="settings-block">
<table class="option" aria-label="Toggle Wikipedia redirects">
<tbody>
<tr>
<td>
<h1 data-localise="__MSG_disableWikipedia__">
Wikipedia Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-wikipedia"
type="checkbox"
/>&nbsp;
<label for="disable-wikipedia" class="checkbox-label"></label>
</td>
</tr>
</tbody>
</table>
</section>
<div class="some-block">
<h4>Search</h4>
<input id="disable-searchEngine" type="checkbox" checked />
</div>
<section class="settings-block">
<table class="option" aria-label="Toggle Scribe redirects">
<tbody>
<tr>
<td>
<h1
data-localise="__MSG_disableScribe__"
class="new-badge"
data-new-badge
>
Scribe Redirects
</h1>
</td>
<td>
<input
aria-hidden="true"
id="disable-scribe"
type="checkbox"
/>&nbsp;
<label for="disable-scribe" class="checkbox-label"></label>
</td>
</tr>
</tbody>
</table>
</section>
<div class="some-block">
<h4>Translate</h4>
<input id="disable-simplyTranslate" type="checkbox" checked />
</div>
<footer>
<a class="button" id="update-instances">
<span data-localise="__MSG_updateInstances__">Update Instances&nbsp;</span>
</a>
<a class="button" id="more-options">
<span data-localise="__MSG_moreOptions__">More Options&nbsp;</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 512 512"
>
<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>
</a>
</footer>
<div class="some-block">
<h4>Maps</h4>
<input id="disable-osm" type="checkbox" checked />
</div>
<script type="module" src="./popup.js"></script>
<script src="../../assets/javascripts/localise.js"></script>
</body>
</html>
<div class="some-block">
<h4>Wikipedia</h4>
<input id="disable-wikipedia" type="checkbox" checked />
</div>
<div class="some-block">
<h4>Medium</h4>
<input id="disable-scribe" type="checkbox" checked />
</div>
<div class="buttons">
<a class="button" id="update-instances">
<span data-localise="__MSG_updateInstances__">Update Instances&nbsp;</span>
</a>
<a class="button" id="more-options">
<span data-localise="__MSG_moreOptions__">More Options&nbsp;</span>
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
<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>
</a>
</div>
<script type="module" src="./popup.js"></script>
<script src="../../assets/javascripts/localise.js"></script>
</body>
</html>

View File

@ -9,7 +9,6 @@ let disableSearchEngine = document.querySelector("#disable-searchEngine");
let disableSimplyTranslate = document.querySelector("#disable-simplyTranslate");
let disableWikipedia = document.querySelector("#disable-wikipedia");
let disableScribe = document.querySelector("#disable-scribe");
let version = document.querySelector("#version");
window.browser = window.browser || window.chrome;
@ -40,8 +39,6 @@ browser.storage.sync.get(
}
);
version.textContent = browser.runtime.getManifest().version;
disableNitter.addEventListener("change", (event) => {
browser.storage.sync.set({ disableNitter: !event.target.checked });
});
@ -79,14 +76,13 @@ disableScribe.addEventListener("change", (event) => {
});
const apiEndpoint = 'https://raw.githubusercontent.com/libredirect/instances/main/data.json';
document.querySelector("#update-instances").addEventListener("click", () => {
let request = new XMLHttpRequest();
request.open('GET', apiEndpoint, false);
request.send(null);
if (request.status === 200) {
document.querySelector("#update-instances").innerHTML = 'gav';
document.querySelector("#update-instances").innerHTML = 'gav';
const instances = JSON.parse(request.responseText);
const nitterRandomPool = instances.twitter.join(',');
const invidiousRandomPool = instances.youtube.join(',');

View File

@ -1,8 +1,8 @@
body {
--text: #fff;
--bg-main: #3c4043;
--bg-secondary: #292a2d;
--active: #ff5b56;
--bg-main: #121212;
--bg-secondary: #202020;
--active: #fbc117;
--space: 5px;
--danger: #f04141;
--danger-light: #f9d0d5;
@ -16,73 +16,22 @@ body.light-theme {
--bg-secondary: #fff;
}
.light-theme.popup,
.light-theme .popup {
background-color: var(--bg-secondary);
}
body {
margin: 0;
width: 400px;
margin: auto;
padding: 0;
min-height: 572px;
font-family: Sans-Serif;
background-color: var(--bg-secondary);
color: var(--text);
}
.popup {
width: 300px;
min-height: auto;
overflow: hidden;
background-color: var(--bg-main);
}
input {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
header {
background-color: var(--bg-main);
color: var(--text);
display: flex;
padding: var(--space);
}
header .logo-container {
width: 100%;
margin: var(--space) 0 var(--space) 0;
display: flex;
align-items: center;
}
header .logo-container img {
height: 30px;
float: left;
}
header .logo-container h1 {
font-size: 14px;
float: left;
margin-left: 15px;
text-transform: uppercase;
font-weight: normal;
}
header .privacy {
letter-spacing: 0.13em;
}
header .version {
font-size: 8.5px;
font-weight: bold;
position: absolute;
top: var(--space);
right: var(--space);
}
h1 {
font-size: 14px;
margin: 7px auto;
@ -112,27 +61,29 @@ footer {
width: 100%;
}
footer a.button {
margin: var(--space);
}
input[type="url"],
input[type="text"],
select {
width: 100%;
margin: auto;
border-radius: 3px;
box-sizing: border-box;
margin-bottom: var(--space);
background-color: var(--bg-main);
border-style: inset;
border-style: solid;
border-color: #767676;
color: var(--text);
}
input[type="url"] {
padding: 1px 2px;
select{
margin: 0;
width: auto;
border-radius: 3px;
}
input[type="checkbox"] {
opacity: 0;
input[type="url"] {
padding: 5px;
}
input[type="radio"] {
@ -141,7 +92,7 @@ input[type="radio"] {
-webkit-appearance: radio;
}
input[type="radio"]:checked + label {
input[type="radio"]:checked+label {
background: transparent;
}
@ -172,18 +123,18 @@ input[type="radio"]:checked + label {
width: 20px;
}
input:checked + label {
input:checked+label {
background: var(--active);
}
input:checked + label:after {
input:checked+label:after {
left: calc(100% - var(--space));
transform: translateX(-100%);
}
.settings-block {
display: block;
padding: 5px 10px 5px 10px;
padding: 5px 15px;
}
.settings-block h1 {
@ -242,8 +193,6 @@ input:invalid {
}
.tab button {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color: var(--text);
background-color: inherit;
float: left;
@ -257,6 +206,14 @@ input:invalid {
font-size: 14px;
}
.tab button.left {
border-top-left-radius: 7px;
}
.tab button.right {
border-top-right-radius: 7px;
}
.tab button:hover {
background-color: var(--active);
}
@ -276,7 +233,7 @@ div.exceptions {
clear: left;
}
div.exceptions > input {
div.exceptions>input {
width: 240px;
float: left;
}
@ -334,7 +291,7 @@ li {
}
.autocomplete input {
background: url(../images/chevron-down.svg) right no-repeat;
background: url(../../assets/images/chevron-down.svg) right no-repeat;
}
.autocomplete-items {
@ -438,8 +395,8 @@ input[type="range"]::-moz-range-thumb {
opacity: 0.7;
}
*:focus {
outline: var(--active) solid 2px;
input[type="url"]:focus {
outline: none;
}
@media (prefers-color-scheme: light) {
@ -536,3 +493,123 @@ hr {
box-shadow: 0 0 1px var(--bg-secondary);
font-weight: bold;
}
.light-theme.popup,
.light-theme .popup {
background-color: var(--bg-secondary);
}
body.light-theme {
--text: #000;
--bg-main: #e3e7ea;
--bg-secondary: #fff;
}
body.popup {
width: 200px;
min-height: auto;
background-color: var(--bg-main);
}
div.some-block {
padding: 0 15px;
justify-content: space-between;
display: flex;
align-items: center;
margin-top: 10px;
margin-bottom: 10px;
}
div.some-block h4 {
margin: 0;
width: 70%;
}
textarea {
resize: vertical;
width: 100%;
height: 200px;
}
div.some-block input[type="checkbox"] {
width: 48px;
height: 25px;
background-color: var(--light-grey);
border-radius: 50px;
transition: .4s;
cursor: pointer;
}
div.some-block input[type="checkbox"]:checked {
background-color: var(--active);
}
div.some-block input[type="checkbox"]:focus {
outline: none;
}
div.some-block input[type="checkbox"]::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
box-sizing: border-box;
position: relative;
top: 2.5px;
left: 4px;
height: 20px;
background-color: white;
border-radius: 50%;
transition: .4s;
}
div.some-block input[type="checkbox"]:checked::before {
left: 24px;
}
div.buttons {
margin-bottom: 15px;
}
a.button {
border-radius: 5px;
border: var(--active) solid 1px;
color: var(--text);
stroke: var(--text);
display: block;
font-size: 12px;
font-weight: bold;
margin: 7.5px 15px;
padding: 10px;
text-align: center;
text-decoration: none;
cursor: pointer;
transition-duration: 0.1s;
}
a.button * {
vertical-align: middle;
}
a.button:hover {
background-color: var(--active);
color: var(--text);
stroke: var(--text);
}
a.button:active {
background-color: var(--active);
box-shadow: 0 var(--space) var(--bg-main);
transform: translateY(1px);
}
a.button svg {
height: 18px;
width: 18px;
}