summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--manifest.json2
-rw-r--r--pages/options/options.html236
-rw-r--r--pages/options/options.js50
-rw-r--r--pages/styles.css47
4 files changed, 210 insertions, 125 deletions
diff --git a/manifest.json b/manifest.json
index 4e424c5..e69a8ba 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"name": "Privacy Redirect",
"description": "Redirects Twitter, YouTube, Instagram & Google Maps requests to privacy friendly alternatives.",
- "version": "1.1.21",
+ "version": "1.1.22",
"manifest_version": 2,
"background": {
"scripts": [
diff --git a/pages/options/options.html b/pages/options/options.html
index 6054587..f638fcf 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -11,114 +11,134 @@
<body>
- <section class="options settings_block">
- <div class="onoffswitch switch" aria-label="Toggle Nitter redirects">
- <h1>Nitter Redirects</h1>
- <input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp;
- <label for="disable-nitter" class="checkbox-label">
- </label>
- </div>
- </section>
-
- <section class="options settings_block">
- <div class="onoffswitch switch" aria-label="Toggle Invidious redirects">
- <h1>Invidious Redirects</h1>
- <input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp;
- <label for="disable-invidious" class="checkbox-label">
- </label>
- </div>
- </section>
-
- <section class="options settings_block">
- <div class="onoffswitch switch" aria-label="Toggle Bibliogram redirects">
- <h1>Bibliogram Redirects</h1>
- <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp;
- <label for="disable-bibliogram" class="checkbox-label">
- </label>
- </div>
- </section>
-
- <section class="options settings_block">
- <div class="onoffswitch switch" aria-label="Toggle OpenStreetMap redirects">
- <h1>OpenStreetMap Redirects</h1>
- <input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp;
- <label for="disable-osm" class="checkbox-label">
- </label>
- </div>
- </section>
-
- <section class="options settings_block">
- <h1>Nitter Instance</h1>
- <input id="nitter-instance" list="nitter-instance-list" type="url" placeholder="https://nitter.net">
- <datalist id="nitter-instance-list">
- <option value="https://nitter.net">
- <option value="https://nitter.snopyta.org">
- <option value="https://nitter.42l.fr">
- <option value="https://nitter.nixnet.xyz">
- <option value="https://nitter.13ad.de">
- <option value="https://tw.openalgeria.org">
- </datalist>
- <h1>Invidious Instance</h1>
- <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us">
- <datalist id="invidious-instances-list">
- <option value="https://invidio.us">
- <option value="https://invidious.snopyta.org">
- <option value="https://invidiou.sh">
- <option value="https://yewtu.be">
- <option value="https://invidious.zapashcanon.fr">
- <option value="https://invidious.toot.koeln">
- <option value="https://invidious.ggc-project.de">
- </datalist>
- <h1>Bibliogram Instance</h1>
- <input id="bibliogram-instance" list="bibliogram-instance-list" type="url" placeholder="https://bibliogram.art">
- <datalist id="bibliogram-instance-list">
- <option value="https://bibliogram.art">
- <option value="https://bibliogram.snopyta.org">
- <option value="https://bibliogram.pussthecat.org">
- </datalist>
- <h1>OpenStreetMap Instance</h1>
- <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org">
- <datalist id="osm-instance-list">
- <option value="https://openstreetmap.org">
- </datalist>
- </section>
-
- <section class="options settings_block">
- <div class="onoffswitch switch" aria-label="Always proxy videos through Invidious">
- <h1>Always proxy videos through Invidious?</h1>
- <input aria-hidden="true" id="always-proxy" type="checkbox" checked>&nbsp;
- <label for="always-proxy" class="checkbox-label">
- </label>
- </div>
- </section>
-
- <section class="options settings_block">
- <div class="onoffswitch switch" aria-label="Only redirect embedded video to Invidious">
- <h1>Only redirect embedded video to Invidious?</h1>
- <input aria-hidden="true" id="only-embed" type="checkbox" checked>&nbsp;
- <label for="only-embed" class="checkbox-label">
- </label>
- </div>
- </section>
-
- <section class="options settings_block">
- <h1>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>
- </select>
- </section>
-
- <section class="options settings_block">
- <div class="onoffswitch switch" aria-label="Proactively remove Twitter service worker">
- <h1>Proactively remove Twitter service worker</h1>
- <input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>&nbsp;
- <label for="remove-twitter-sw" class="checkbox-label">
- </label>
- </div>
- </section>
+ <div class="tab">
+ <button class="tablinks" id="generalTab">
+ General
+ </button>
+ <button class="tablinks" id="advancedTab">
+ Advanced
+ </button>
+ <button class="tablinks" id="whitelistTab">
+ Whitelist
+ </button>
+ </div>
+
+ <div id="general" class="tabcontent">
+ <section class="options settings_block">
+ <div class="onoffswitch switch" aria-label="Toggle Nitter redirects">
+ <h1>Nitter Redirects</h1>
+ <input aria-hidden="true" id="disable-nitter" type="checkbox" checked>&nbsp;
+ <label for="disable-nitter" class="checkbox-label">
+ </label>
+ </div>
+ </section>
+
+ <section class="options settings_block">
+ <div class="onoffswitch switch" aria-label="Toggle Invidious redirects">
+ <h1>Invidious Redirects</h1>
+ <input aria-hidden="true" id="disable-invidious" type="checkbox" checked>&nbsp;
+ <label for="disable-invidious" class="checkbox-label">
+ </label>
+ </div>
+ </section>
+
+ <section class="options settings_block">
+ <div class="onoffswitch switch" aria-label="Toggle Bibliogram redirects">
+ <h1>Bibliogram Redirects</h1>
+ <input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>&nbsp;
+ <label for="disable-bibliogram" class="checkbox-label">
+ </label>
+ </div>
+ </section>
+
+ <section class="options settings_block">
+ <div class="onoffswitch switch" aria-label="Toggle OpenStreetMap redirects">
+ <h1>OpenStreetMap Redirects</h1>
+ <input aria-hidden="true" id="disable-osm" type="checkbox" checked>&nbsp;
+ <label for="disable-osm" class="checkbox-label">
+ </label>
+ </div>
+ </section>
+
+ <section class="options settings_block">
+ <h1>Nitter Instance</h1>
+ <input id="nitter-instance" list="nitter-instance-list" type="url" placeholder="https://nitter.net">
+ <datalist id="nitter-instance-list">
+ <option value="https://nitter.net">
+ <option value="https://nitter.snopyta.org">
+ <option value="https://nitter.42l.fr">
+ <option value="https://nitter.nixnet.xyz">
+ <option value="https://nitter.13ad.de">
+ <option value="https://tw.openalgeria.org">
+ </datalist>
+ <h1>Invidious Instance</h1>
+ <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us">
+ <datalist id="invidious-instances-list">
+ <option value="https://invidio.us">
+ <option value="https://invidious.snopyta.org">
+ <option value="https://invidiou.sh">
+ <option value="https://yewtu.be">
+ <option value="https://invidious.zapashcanon.fr">
+ <option value="https://invidious.toot.koeln">
+ <option value="https://invidious.ggc-project.de">
+ </datalist>
+ <h1>Bibliogram Instance</h1>
+ <input id="bibliogram-instance" list="bibliogram-instance-list" type="url" placeholder="https://bibliogram.art">
+ <datalist id="bibliogram-instance-list">
+ <option value="https://bibliogram.art">
+ <option value="https://bibliogram.snopyta.org">
+ <option value="https://bibliogram.pussthecat.org">
+ </datalist>
+ <h1>OpenStreetMap Instance</h1>
+ <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org">
+ <datalist id="osm-instance-list">
+ <option value="https://openstreetmap.org">
+ </datalist>
+ </section>
+ </div>
+
+ <div id="advanced" class="tabcontent">
+ <section class="options settings_block">
+ <div class="onoffswitch switch" aria-label="Always proxy videos through Invidious">
+ <h1>Always proxy videos through Invidious</h1>
+ <input aria-hidden="true" id="always-proxy" type="checkbox" checked>&nbsp;
+ <label for="always-proxy" class="checkbox-label">
+ </label>
+ </div>
+ </section>
+
+ <section class="options settings_block">
+ <div class="onoffswitch switch" aria-label="Only redirect embedded video to Invidious">
+ <h1>Only redirect embedded video to Invidious</h1>
+ <input aria-hidden="true" id="only-embed" type="checkbox" checked>&nbsp;
+ <label for="only-embed" class="checkbox-label">
+ </label>
+ </div>
+ </section>
+
+ <section class="options settings_block">
+ <h1>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>
+ </select>
+ </section>
+
+ <section class="options settings_block">
+ <div class="onoffswitch switch" aria-label="Proactively remove Twitter service worker">
+ <h1>Proactively remove Twitter service worker</h1>
+ <input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>&nbsp;
+ <label for="remove-twitter-sw" class="checkbox-label">
+ </label>
+ </div>
+ </section>
+ </div>
+
+ <div id="whitelist" class="tabcontent">
+
+ </div>
<script src="./options.js"></script>
diff --git a/pages/options/options.js b/pages/options/options.js
index 3b85038..d702eb8 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -1,17 +1,17 @@
'use strict';
-let nitterInstance = document.querySelector('#nitter-instance');
-let invidiousInstance = document.querySelector('#invidious-instance');
-let bibliogramInstance = document.querySelector('#bibliogram-instance');
-let osmInstance = document.querySelector('#osm-instance');
-let disableNitter = document.querySelector('#disable-nitter');
-let disableInvidious = document.querySelector('#disable-invidious');
-let disableBibliogram = document.querySelector('#disable-bibliogram');
-let disableOsm = document.querySelector('#disable-osm');
-let alwaysProxy = document.querySelector('#always-proxy');
-let onlyEmbeddedVideo = document.querySelector('#only-embed');
-let videoQuality = document.querySelector('#video-quality');
-let removeTwitterSW = document.querySelector('#remove-twitter-sw');
+let nitterInstance = document.getElementById('nitter-instance');
+let invidiousInstance = document.getElementById('invidious-instance');
+let bibliogramInstance = document.getElementById('bibliogram-instance');
+let osmInstance = document.getElementById('osm-instance');
+let disableNitter = document.getElementById('disable-nitter');
+let disableInvidious = document.getElementById('disable-invidious');
+let disableBibliogram = document.getElementById('disable-bibliogram');
+let disableOsm = document.getElementById('disable-osm');
+let alwaysProxy = document.getElementById('always-proxy');
+let onlyEmbeddedVideo = document.getElementById('only-embed');
+let videoQuality = document.getElementById('video-quality');
+let removeTwitterSW = document.getElementById('remove-twitter-sw');
window.browser = window.browser || window.chrome;
@@ -46,6 +46,32 @@ 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('generalTab').addEventListener(
+ 'click', openTab.bind(null, 'general')
+);
+document.getElementById('advancedTab').addEventListener(
+ 'click', openTab.bind(null, 'advanced')
+);
+document.getElementById('whitelistTab').addEventListener(
+ 'click', openTab.bind(null, 'whitelist')
+);
+
+document.getElementById('generalTab').click();
+
function debounce(func, wait, immediate) {
let timeout;
return () => {
diff --git a/pages/styles.css b/pages/styles.css
index 822182d..ca1c781 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -2,6 +2,7 @@
--text-main: #FFF;
--text-secondary: #000;
--dark-grey: #3C4043;
+ --darker-grey: #292A2D;
--white: #FFF;
--active: #FF5B56;
--space: 5px;
@@ -12,16 +13,17 @@
body {
color: var(--text-secondary);
margin: 0;
- background-color: var(--dark-grey);
+ background-color: var(--darker-grey);
max-width: 400px;
margin: auto;
+ min-height: 460px;
}
-
-
.popup {
- min-width: 300px;
+ width: 300px;
+ height: auto;
overflow: hidden;
+ background-color: var(--dark-grey);
}
input {
@@ -190,3 +192,40 @@ input[type="url"]:invalid {
.margin-bottom {
margin-bottom: 20px;
}
+
+.tab {
+ overflow: hidden;
+ background-color: var(--darker-grey);
+}
+
+.tab button {
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ color: var(--text-main);
+ background-color: inherit;
+ float: left;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ padding: 14px 16px;
+ transition: 0.3s;
+ border: solid 1px var(--dark-grey);
+ width: 33.333%;
+ font-size: 14px;
+}
+
+.tab button:hover {
+ background-color: var(--active);
+}
+
+.tab button.active {
+ background-color: var(--dark-grey);
+}
+
+.tabcontent {
+ padding-top: 10px;
+ display: none;
+ border: solid 1px var(--dark-grey);
+ background-color: var(--dark-grey);
+ min-height: 403px;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-17 20:53:02 +0000