Updating options.html design
This commit is contained in:
ManeraKai
parent
2050c571a9
commit
aeef1b7778
@ -19,11 +19,18 @@ function getInstances() {
|
||||
|
||||
if (request.status === 200) {
|
||||
const instances = JSON.parse(request.responseText);
|
||||
const nitterRandomPool = addHttps(filterInstances(instances.twitter)).join(',');
|
||||
const invidiousRandomPool = addHttps(filterInstances(instances.youtube)).join(',');
|
||||
const bibliogramRandomPool = addHttps(filterInstances(instances.instagram)).join(',');
|
||||
const scribeRandomPool = addHttps(filterInstances(instances.wikipedia)).join(',')
|
||||
browser.storage.sync.set({ nitterRandomPool, invidiousRandomPool, bibliogramRandomPool, scribeRandomPool});
|
||||
const nitterRandomPool = addHttps(filterInstances(instances.nitter)).join(',');
|
||||
const invidiousRandomPool = addHttps(filterInstances(instances.invidious)).join(',');
|
||||
const bibliogramRandomPool = addHttps(filterInstances(instances.bibliogram)).join(',');
|
||||
const wikilessRandomPool = addHttps(filterInstances(instances.wikiless)).join(',')
|
||||
const scribeRandomPool = addHttps(filterInstances(instances.scribe)).join(',')
|
||||
browser.storage.sync.set({
|
||||
nitterRandomPool,
|
||||
invidiousRandomPool,
|
||||
bibliogramRandomPool,
|
||||
wikilessRandomPool,
|
||||
scribeRandomPool
|
||||
});
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
||||
@ -88,7 +88,7 @@
|
||||
],
|
||||
"options_ui": {
|
||||
"page": "pages/options/options.html",
|
||||
"open_in_tab": false
|
||||
"open_in_tab": true
|
||||
},
|
||||
"web_accessible_resources": [
|
||||
"assets/javascripts/helpers/*"
|
||||
|
||||
@ -110,6 +110,7 @@ browser.storage.sync.get(
|
||||
"invidiousRandomPool",
|
||||
"bibliogramRandomPool",
|
||||
"scribeRandomPool",
|
||||
"wikilessRandomPool",
|
||||
"exceptions",
|
||||
],
|
||||
(result) => {
|
||||
@ -670,7 +671,12 @@ browser.webRequest.onBeforeRequest.addListener(
|
||||
);
|
||||
|
||||
browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => {
|
||||
const url = new URL(changeInfo.url);
|
||||
let url;
|
||||
try {
|
||||
url = new URL(changeInfo.url)
|
||||
} catch (_) {
|
||||
return;
|
||||
}
|
||||
var protocolHost = `${url.protocol}//${url.host}`;
|
||||
var mightyList = [];
|
||||
mightyList.push(...invidiousInstances);
|
||||
@ -684,7 +690,6 @@ browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => {
|
||||
|
||||
if (mightyList.includes(protocolHost))
|
||||
browser.pageAction.show(tabId);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
@ -9,312 +9,285 @@
|
||||
<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>
|
||||
<body class="option">
|
||||
|
||||
<div class="some-block option-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 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 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>
|
||||
<hr>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h1>Youtube (Invidious)</h1>
|
||||
<input id="disable-invidious" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div id="advanced" class="tabcontent">
|
||||
|
||||
<button type="button" class="collapsible">
|
||||
Youtube (Invidious)
|
||||
</button>
|
||||
<div class="collapsible-content">
|
||||
<section class="settings-block">
|
||||
<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">
|
||||
<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 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">
|
||||
<h1 data-localise="__MSG_invidiousVolume__">
|
||||
Invidious Volume: <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">
|
||||
<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 class="some-block option-block">
|
||||
<h4>Instance</h4>
|
||||
<div class="autocomplete">
|
||||
<input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
|
||||
placeholder="Random instance (none selected)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="settings-block">
|
||||
<h4>Random Instance Pool (comma-separated)</h4>
|
||||
<textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" type="text"></textarea>
|
||||
</section>
|
||||
|
||||
<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="
|
||||
<div class="some-block option-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 option-block">
|
||||
<h4 data-localise="__MSG_alwaysProxy__">Always proxy videos through Invidious</h4>
|
||||
<input id="always-proxy" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4 data-localise="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4>
|
||||
<input id="only-embed" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Video Quality</h4>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Dark mode</h4>
|
||||
<input id="invidious-dark-mode" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block">
|
||||
<h4>Volume: <span id="volume-value">50%</span></h4>
|
||||
<input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Player Style</h4>
|
||||
<select id="invidious-player-style">
|
||||
<option value="">Invidious</option>
|
||||
<option value="youtube">YouTube</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Subtitles - language codes</h4>
|
||||
<input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Automatically play video on load</h4>
|
||||
<input id="invidious-autoplay" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Persist preferences (as cookie)</h4>
|
||||
<input id="persist-invidious-prefs" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h1>Twitter (Nitter)</h1>
|
||||
<input id="disable-nitter" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="some-block option-block">
|
||||
<h4>Instance</h4>
|
||||
<div class="autocomplete">
|
||||
<input id="nitter-instance" type="url" name="nitter-instance"
|
||||
data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="settings-block">
|
||||
<h4>Random instance pool (comma-separated)</h4>
|
||||
<textarea id="nitter-random-pool" name="nitter-random-pool" type="text"></textarea>
|
||||
</section>
|
||||
<div class="some-block option-block">
|
||||
<h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4>
|
||||
<input id="remove-twitter-sw" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h1>Instagram (Bibliogram)</h1>
|
||||
<input id="disable-bibliogram" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="some-block option-block">
|
||||
<h4>Instance</h4>
|
||||
<div class="autocomplete">
|
||||
<input id="bibliogram-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
|
||||
placeholder="Random instance (none selected)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="settings-block">
|
||||
<h4>Random instance pool (comma-separated)</h4>
|
||||
<textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h1>Reddit (LibReddit)</h1>
|
||||
<input id="disable-reddit" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="some-block option-block">
|
||||
<h4>Instance</h4>
|
||||
<div class="autocomplete">
|
||||
<input id="reddit-instance" type="url" placeholder="https://libredd.it" />
|
||||
</div>
|
||||
</div>
|
||||
<section class="settings-block">
|
||||
<h4>Random instance pool (comma-separated)</h4>
|
||||
<textarea id="scribe-random-pool" name="scribe-random-pool" type="text"></textarea>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h1>Search</h1>
|
||||
<input id="disable-searchEngine" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="some-block option-block">
|
||||
<h4>Instance</h4>
|
||||
<div class="autocomplete">
|
||||
<input id="searchEngine-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__"
|
||||
placeholder="Random instance (none selected)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h1>Translate (SimplyTranslate)</h1>
|
||||
<input id="disable-simplyTranslate" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="some-block option-block">
|
||||
<h4>Instance</h4>
|
||||
<div class="autocomplete">
|
||||
<input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h1>Maps (OpenStreetMap)</h1>
|
||||
<input id="disable-osm" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="some-block option-block">
|
||||
<h4>Instance</h4>
|
||||
<div class="autocomplete">
|
||||
<input id="osm-instance" type="url" placeholder="https://openstreetmap.org" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h1>Wikipedia (Wikiless)</h1>
|
||||
<input id="disable-wikipedia" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="some-block option-block">
|
||||
<h4>Instance</h4>
|
||||
<div class="autocomplete">
|
||||
<input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h1>Medium (Scribe)</h1>
|
||||
<input id="disable-scribe" type="checkbox" checked />
|
||||
</div>
|
||||
<div class="some-block option-block">
|
||||
<h4>Instance</h4>
|
||||
<div class="autocomplete">
|
||||
<input id="scribe-instance" type="url" name="scribe-instance"
|
||||
data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button" id="update-instances">
|
||||
<span data-localise="__MSG_updateInstances__">Update Instances</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<script type="module" src="./options.js"></script>
|
||||
<script src="../../assets/javascripts/localise.js"></script>
|
||||
|
||||
@ -194,32 +194,6 @@ browser.storage.sync.get(
|
||||
}
|
||||
);
|
||||
|
||||
function openTab(tab, event) {
|
||||
let i, tabcontent, tablinks;
|
||||
tabcontent = document.getElementsByClassName("tabcontent");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].style.display = "none";
|
||||
}
|
||||
tablinks = document.getElementsByClassName("tablinks");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
||||
}
|
||||
document.getElementById(tab).style.display = "block";
|
||||
event.currentTarget.className += " active";
|
||||
}
|
||||
|
||||
document
|
||||
.getElementById("general-tab")
|
||||
.addEventListener("click", openTab.bind(null, "general"));
|
||||
document
|
||||
.getElementById("advanced-tab")
|
||||
.addEventListener("click", openTab.bind(null, "advanced"));
|
||||
document
|
||||
.getElementById("exceptions-tab")
|
||||
.addEventListener("click", openTab.bind(null, "exceptions"));
|
||||
|
||||
document.getElementById("general-tab").click();
|
||||
|
||||
function addToExceptions() {
|
||||
const input = document.getElementById("new-exceptions-item");
|
||||
const type = document.querySelector('input[name="type"]:checked').value;
|
||||
|
||||
@ -4,14 +4,11 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title></title>
|
||||
<link href="../stylesheets/styles.css" rel="stylesheet" />
|
||||
<link href="./style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body class="popup">
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<div class="some-block">
|
||||
<h4>Youtube</h4>
|
||||
<input id="disable-invidious" type="checkbox" checked />
|
||||
|
||||
5
src/pages/popup/style.css
Normal file
5
src/pages/popup/style.css
Normal file
@ -0,0 +1,5 @@
|
||||
body {
|
||||
width: 200px;
|
||||
min-height: auto;
|
||||
background-color: var(--bg-main);
|
||||
}
|
||||
@ -17,16 +17,15 @@ body.light-theme {
|
||||
}
|
||||
|
||||
body {
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
min-height: 572px;
|
||||
font-family: Sans-Serif;
|
||||
background-color: var(--bg-secondary);
|
||||
background-color: var(--bg-main);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input {
|
||||
div.some-block input[type="checkbox"] {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@ -37,10 +36,6 @@ h1 {
|
||||
margin: 7px auto;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
clear: both;
|
||||
font-size: 12px;
|
||||
@ -48,24 +43,16 @@ h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
input[type="url"],
|
||||
input[type="text"],
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
width: 400px;
|
||||
margin: auto;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
@ -73,18 +60,22 @@ select {
|
||||
background-color: var(--bg-main);
|
||||
border-style: solid;
|
||||
border-color: #767676;
|
||||
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
select{
|
||||
select {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 8px;
|
||||
background-color: var(--bg-secondary);
|
||||
border: none;
|
||||
;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
input[type="url"] {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
appearance: radio;
|
||||
@ -96,33 +87,6 @@ input[type="radio"]:checked+label {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
margin-left: 5px;
|
||||
background: grey;
|
||||
border-radius: 25px;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
text-indent: -400px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.checkbox-label:after {
|
||||
background: white;
|
||||
border-radius: 90px;
|
||||
content: "";
|
||||
height: 20px;
|
||||
left: var(--space);
|
||||
position: absolute;
|
||||
top: var(--space);
|
||||
transition: 0.3s;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
input:checked+label {
|
||||
background: var(--active);
|
||||
}
|
||||
@ -134,29 +98,10 @@ input:checked+label:after {
|
||||
|
||||
.settings-block {
|
||||
display: block;
|
||||
margin: 30px 0;
|
||||
padding: 5px 15px;
|
||||
}
|
||||
|
||||
.settings-block h1 {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.button {
|
||||
border: var(--active) solid 1px;
|
||||
color: var(--text);
|
||||
stroke: var(--text);
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin: var(--space) auto;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
-webkit-transition-duration: 0.4s;
|
||||
transition-duration: 0.4s;
|
||||
}
|
||||
|
||||
.button * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
@ -183,52 +128,6 @@ input:invalid {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
background-color: var(--bg-secondary);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 400px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tab button {
|
||||
color: var(--text);
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: 0.3s;
|
||||
border: solid 1px var(--bg-main);
|
||||
width: 33.333%;
|
||||
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);
|
||||
}
|
||||
|
||||
.tab button.active {
|
||||
background-color: var(--bg-main);
|
||||
}
|
||||
|
||||
.tabcontent {
|
||||
padding-top: 50px;
|
||||
display: none;
|
||||
background-color: var(--bg-main);
|
||||
min-height: 510px;
|
||||
}
|
||||
|
||||
div.exceptions {
|
||||
clear: left;
|
||||
}
|
||||
@ -334,60 +233,9 @@ li {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
input[type="range"] {
|
||||
-webkit-appearance: none;
|
||||
margin: 18px 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="range"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
border-color: var(--dark-grey), var(--light-grey);
|
||||
background: var(--bg-main);
|
||||
border-radius: 1.3px;
|
||||
border: 0.2px inset var(--dark-grey);
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
border-color: var(--active);
|
||||
border: 1px solid var(--dark-grey);
|
||||
height: 36px;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
background: var(--active);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
input[type="range"]:focus::-webkit-slider-runnable-track {
|
||||
background: var(--bg-main);
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
border-color: var(--dark-grey), var(--light-grey);
|
||||
background: var(--bg-main);
|
||||
border-radius: 1.3px;
|
||||
border: 0.2px inset var(--dark-grey);
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
border-color: var(--active);
|
||||
border: 1px solid var(--dark-grey);
|
||||
height: 36px;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
background: var(--active);
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
@ -395,32 +243,13 @@ input[type="range"]::-moz-range-thumb {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
input[type="text"]:focus,
|
||||
input[type="url"]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
--text: #000;
|
||||
--text-secondary: #fff;
|
||||
--bg-main: #e3e7ea;
|
||||
--bg-secondary: #fff;
|
||||
}
|
||||
|
||||
body.dark-theme {
|
||||
--text: #fff;
|
||||
--text-secondary: #000;
|
||||
--bg-main: #3c4043;
|
||||
--bg-secondary: #292a2d;
|
||||
}
|
||||
|
||||
.popup {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
#volume-value {
|
||||
float: right;
|
||||
color: var(--active);
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
@ -437,38 +266,15 @@ input[type="url"]:focus {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.collapsible:after {
|
||||
content: "\25BE";
|
||||
color: var(--active);
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
/* \25BE */
|
||||
|
||||
.collapsible-active,
|
||||
.collapsible:hover,
|
||||
.collapsible:hover::after {
|
||||
background-color: var(--active);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.collapsible-active:after {
|
||||
content: "\25B4";
|
||||
color: var(--text-secondary);
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.collapsible-content {
|
||||
padding: 0 18px;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
background-color: var(--active);
|
||||
margin: 0 15px;
|
||||
background-color: rgb(77, 77, 77);
|
||||
border: none;
|
||||
}
|
||||
|
||||
@ -494,9 +300,6 @@ hr {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.light-theme.popup,
|
||||
.light-theme .popup {
|
||||
background-color: var(--bg-secondary);
|
||||
@ -508,10 +311,15 @@ body.light-theme {
|
||||
--bg-secondary: #fff;
|
||||
}
|
||||
|
||||
body.popup {
|
||||
width: 200px;
|
||||
min-height: auto;
|
||||
background-color: var(--bg-main);
|
||||
textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
body.option {
|
||||
width: 600px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.some-block {
|
||||
@ -524,15 +332,32 @@ div.some-block {
|
||||
|
||||
}
|
||||
|
||||
div.option-block {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
div.some-block h4 {
|
||||
margin: 0;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
div.option-block h4 {
|
||||
margin-right: 5px;
|
||||
width: 80%;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
div.option-block h1 {
|
||||
margin: 0;
|
||||
margin-right: 5px;
|
||||
width: 80%;
|
||||
font-size: 20px;
|
||||
color: var(--active);
|
||||
}
|
||||
|
||||
div.some-block input[type="checkbox"] {
|
||||
@ -546,7 +371,6 @@ div.some-block input[type="checkbox"] {
|
||||
|
||||
div.some-block input[type="checkbox"]:checked {
|
||||
background-color: var(--active);
|
||||
|
||||
}
|
||||
|
||||
div.some-block input[type="checkbox"]:focus {
|
||||
@ -576,12 +400,13 @@ div.buttons {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
|
||||
a.button {
|
||||
stroke: var(--text);
|
||||
display: block;
|
||||
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;
|
||||
@ -592,10 +417,6 @@ a.button {
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
a.button * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
a.button:hover {
|
||||
background-color: var(--active);
|
||||
color: var(--text);
|
||||
@ -608,8 +429,22 @@ a.button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
--text: #000;
|
||||
--text-secondary: #fff;
|
||||
--bg-main: #e3e7ea;
|
||||
--bg-secondary: #fff;
|
||||
}
|
||||
|
||||
a.button svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
body.dark-theme {
|
||||
--text: #fff;
|
||||
--text-secondary: #000;
|
||||
--bg-main: #3c4043;
|
||||
--bg-secondary: #292a2d;
|
||||
}
|
||||
|
||||
.popup {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user