diff options
Diffstat (limited to 'pages')
| -rw-r--r-- | pages/options/options.html | 40 | ||||
| -rw-r--r-- | pages/options/options.js | 53 | ||||
| -rw-r--r-- | pages/popup/popup.html | 21 | ||||
| -rw-r--r-- | pages/styles.css | 54 |
4 files changed, 145 insertions, 23 deletions
diff --git a/pages/options/options.html b/pages/options/options.html index f638fcf..321babe 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -12,15 +12,9 @@ <body> <div class="tab"> - <button class="tablinks" id="generalTab"> - General - </button> - <button class="tablinks" id="advancedTab"> - Advanced - </button> - <button class="tablinks" id="whitelistTab"> - Whitelist - </button> + <button class="tablinks" id="general-tab">General</button> + <button class="tablinks" id="advanced-tab">Advanced</button> + <button class="tablinks" id="whitelist-tab">Whitelist</button> </div> <div id="general" class="tabcontent"> @@ -70,6 +64,14 @@ <option value="https://nitter.nixnet.xyz"> <option value="https://nitter.13ad.de"> <option value="https://tw.openalgeria.org"> + <option value="https://nitter.pussthecat.org"> + <option value="https://nitter.mastodont.cat"> + <option value="https://nitter.dark.fail"> + <option value="https://nitter.tedomum.net"> + <option value="https://t.maisputain.ovh"> + <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion"> + <option value="http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion"> + <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion"> </datalist> <h1>Invidious Instance</h1> <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us"> @@ -78,9 +80,16 @@ <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://yt.maisputain.ovh"> <option value="https://invidious.toot.koeln"> <option value="https://invidious.ggc-project.de"> + <option value="https://invidious.toot.koeln"> + <option value="http://kgg2m7yk5aybusll.onion"> + <option value="http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion"> + <option value="http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion"> + <option value="http://qklhadlycap4cnod.onion"> + <option value="http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion"> + <option value="http://mfqczy4mysscub2s.onion"> </datalist> <h1>Bibliogram Instance</h1> <input id="bibliogram-instance" list="bibliogram-instance-list" type="url" placeholder="https://bibliogram.art"> @@ -88,6 +97,8 @@ <option value="https://bibliogram.art"> <option value="https://bibliogram.snopyta.org"> <option value="https://bibliogram.pussthecat.org"> + <option value="https://insta.maisputain.ovh"> + <option value="https://bibliogram.nixnet.services"> </datalist> <h1>OpenStreetMap Instance</h1> <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org"> @@ -137,7 +148,14 @@ </div> <div id="whitelist" class="tabcontent"> - + <section class="options settings_block"> + <h1>Whitelisted Sites</h1> + <div class="whitelist"> + <input id="new-whitelist-item" type="text" placeholder="URL (RegExp accepted)"> + <button id="add-to-whitelist">Add to Whitelist</button> + </div> + </section> + <ul id="whitelist-items"></ul> </div> <script src="./options.js"></script> diff --git a/pages/options/options.js b/pages/options/options.js index d702eb8..821d6ed 100644 --- a/pages/options/options.js +++ b/pages/options/options.js @@ -12,9 +12,26 @@ 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'); +let whitelist; window.browser = window.browser || window.chrome; +function prependWhitelistItem(item, index) { + const li = document.createElement('li'); + li.appendChild(document.createTextNode(item.toString())); + const button = document.createElement('button'); + button.appendChild(document.createTextNode('X')); + button.addEventListener('click', () => { + li.remove(); + whitelist.splice(index, 1); + browser.storage.sync.set({ + whitelist: whitelist + }); + }); + li.appendChild(button); + document.getElementById('whitelist-items').prepend(li); +} + browser.storage.sync.get( [ 'nitterInstance', @@ -28,7 +45,8 @@ browser.storage.sync.get( 'alwaysProxy', 'onlyEmbeddedVideo', 'videoQuality', - 'removeTwitterSW' + 'removeTwitterSW', + 'whitelist' ], result => { nitterInstance.value = result.nitterInstance || ''; @@ -43,6 +61,8 @@ browser.storage.sync.get( onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo; videoQuality.value = result.videoQuality || ''; removeTwitterSW.checked = !result.removeTwitterSW; + whitelist = result.whitelist || []; + whitelist.forEach(prependWhitelistItem); } ); @@ -60,17 +80,40 @@ function openTab(tab, event) { event.currentTarget.className += ' active'; } -document.getElementById('generalTab').addEventListener( +document.getElementById('general-tab').addEventListener( 'click', openTab.bind(null, 'general') ); -document.getElementById('advancedTab').addEventListener( +document.getElementById('advanced-tab').addEventListener( 'click', openTab.bind(null, 'advanced') ); -document.getElementById('whitelistTab').addEventListener( +document.getElementById('whitelist-tab').addEventListener( 'click', openTab.bind(null, 'whitelist') ); -document.getElementById('generalTab').click(); +document.getElementById('general-tab').click(); + +function addToWhitelist() { + const input = document.getElementById('new-whitelist-item'); + if (input.value) { + try { + new RegExp(input.value); + const index = whitelist.push(input.value); + prependWhitelistItem(input.value, index); + browser.storage.sync.set({ + whitelist: whitelist + }); + input.value = ''; + } catch (error) { + input.setCustomValidity('Invalid RegExp'); + } + } else { + input.setCustomValidity('Invalid RegExp'); + } +} + +document.getElementById('add-to-whitelist').addEventListener( + 'click', addToWhitelist +); function debounce(func, wait, immediate) { let timeout; diff --git a/pages/popup/popup.html b/pages/popup/popup.html index 2f05f87..1afd091 100644 --- a/pages/popup/popup.html +++ b/pages/popup/popup.html @@ -64,6 +64,14 @@ <option value="https://nitter.nixnet.xyz"> <option value="https://nitter.13ad.de"> <option value="https://tw.openalgeria.org"> + <option value="https://nitter.pussthecat.org"> + <option value="https://nitter.mastodont.cat"> + <option value="https://nitter.dark.fail"> + <option value="https://nitter.tedomum.net"> + <option value="https://t.maisputain.ovh"> + <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion"> + <option value="http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion"> + <option value="http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion"> </datalist> <h1>Invidious Instance</h1> <input id="invidious-instance" list="invidious-instances-list" type="url" placeholder="https://invidio.us"> @@ -72,16 +80,25 @@ <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://yt.maisputain.ovh"> <option value="https://invidious.toot.koeln"> <option value="https://invidious.ggc-project.de"> + <option value="https://invidious.toot.koeln"> + <option value="http://kgg2m7yk5aybusll.onion"> + <option value="http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion"> + <option value="http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion"> + <option value="http://qklhadlycap4cnod.onion"> + <option value="http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion"> + <option value="http://mfqczy4mysscub2s.onion"> </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.dsrev.ru"> + <option value="https://bibliogram.pussthecat.org"> + <option value="https://insta.maisputain.ovh"> + <option value="https://bibliogram.nixnet.services"> </datalist> <h1>OpenStreetMap Instance</h1> <input id="osm-instance" list="osm-instance-list" type="url" placeholder="https://openstreetmap.org"> diff --git a/pages/styles.css b/pages/styles.css index ca1c781..0d5b533 100644 --- a/pages/styles.css +++ b/pages/styles.css @@ -14,9 +14,9 @@ body { color: var(--text-secondary); margin: 0; background-color: var(--darker-grey); - max-width: 400px; + width: 400px; margin: auto; - min-height: 460px; + min-height: 572px; } .popup { @@ -95,7 +95,7 @@ footer a.button { /* Elements */ -input[type=url], select { +input[type=url], input[type=text], select { width: 100%; box-sizing: border-box; margin-bottom: 5px; @@ -183,7 +183,7 @@ input:checked+label:after { transform: translateY(4px); } -input[type="url"]:invalid { +input:invalid { color: var(--danger); border-color: var(--danger); background-color: var(--danger-light); @@ -227,5 +227,49 @@ input[type="url"]:invalid { display: none; border: solid 1px var(--dark-grey); background-color: var(--dark-grey); - min-height: 403px; + min-height: 510px; +} + +div.whitelist { + clear: left; +} + +div.whitelist > input { + width: 240px; + float: left; +} + +#add-to-whitelist { + width: 120px; + float: right; + border: var(--active) solid 1px; + background-color: var(--active); + color: var(--text-main); + font-weight: bold; + cursor: pointer; + border-radius: 25px; +} + +ul { + padding: 0; + list-style-type: none; + color: var(--text-main); + margin-right: 20px; + margin-left: 20px; +} + +li { + border-bottom: solid 0.5px var(--darker-grey); + padding: 20px 0px 20px 20px; +} + +#whitelist-items button { + float: right; + margin-right: -5px; + border: var(--active) solid 1px; + background-color: var(--active); + color: var(--text-main); + font-weight: bold; + cursor: pointer; + border-radius: 50%; } |