Complete options & popup menus

This commit is contained in:
Simon Brazell 2019-10-07 22:59:31 +11:00
parent 2738833c54
commit 7249afb8ed
7 changed files with 157 additions and 42 deletions

View File

@ -1,19 +1,56 @@
const nitter = "https://nitter.net";
const invidious = "https://invidio.us";
const youtubeRegex = /((www|m)\.)?youtube(-nocookie)?\.com/
'use strict';
const nitterDefault = 'https://nitter.net';
const invidiousDefault = 'https://invidio.us';
const youtubeRegex = /((www|m)\.)?youtube(-nocookie)?\.com/;
const pathRegex = /^https?:\/\/[^\/]+([\S\s]*)/;
let nitterInstance;
let invidiousInstance;
let disableNitter;
let disableInvidious;
chrome.storage.sync.get(
['disableNitter', 'disableInvidious', 'nitterInstance', 'invidiousInstance'],
(result) => {
disableNitter = result.disableNitter;
disableInvidious = result.disableInvidious;
nitterInstance = result.nitterInstance || nitterDefault;
invidiousInstance = result.invidiousInstance || invidiousDefault;
}
);
chrome.storage.onChanged.addListener(function (changes) {
if ('nitterInstance' in changes) {
nitterInstance = changes.nitterInstance.newValue || nitterDefault;
}
if ('invidiousInstance' in changes) {
invidiousInstance = changes.invidiousInstance.newValue || invidiousDefault;
}
if ('disableNitter' in changes) {
disableNitter = changes.disableNitter.newValue;
}
if ('disableInvidious' in changes) {
disableInvidious = changes.disableInvidious.newValue;
}
});
chrome.webRequest.onBeforeRequest.addListener(
function (details) {
if (details.url.match(youtubeRegex)) {
return {
redirectUrl:
invidious + details.url.match(/^https?:\/\/[^\/]+([\S\s]*)/)[1]
};
if (!disableInvidious) {
return {
redirectUrl:
invidiousInstance + details.url.match(pathRegex)[1]
};
}
} else {
return {
redirectUrl:
nitter + details.url.match(/^https?:\/\/[^\/]+([\S\s]*)/)[1]
};
if (!disableNitter) {
return {
redirectUrl:
nitterInstance + details.url.match(pathRegex)[1]
};
}
}
},
{

View File

@ -1,12 +1,13 @@
{
"name": "Privacy Redirect",
"description": "Redirects Twitter & Youtube requests to privacy friendly alternatives (Nitter & Invidious).",
"version": "1.0.2",
"version": "1.1.1",
"manifest_version": 2,
"background": {
"scripts": [
"background.js"
]
],
"persistent": true
},
"icons": {
"16": "images/icon16.png",
@ -39,5 +40,10 @@
"options_ui": {
"page": "pages/options/options.html",
"open_in_tab": false
},
"browser_specific_settings": {
"gecko": {
"id": "{b7f9d2cd-d772-4302-8c3f-eb941af36f76}"
}
}
}

View File

@ -2,26 +2,46 @@
<html>
<head>
<title>My Test Extension Options</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="../styles.css" rel="stylesheet">
<title>Privacy Redirect Options</title>
</head>
<body>
Favorite color:
<select id="color">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
</select>
<section class="options settings_block">
<div class="onoffswitch switch" aria-label="Toggle Nitter redirects">
<h1>Nitter Redirects</h1>
<input aria-hidden="true" id="disableNitter" type="checkbox" checked>&nbsp;
<label for="disableNitter" class="checkbox-label">
</label>
</div>
</section>
<label>
<input type="checkbox" id="like">
I like colors.
</label>
<section class="options settings_block">
<div class="onoffswitch switch" aria-label="Toggle Invidious redirects">
<h1>Invidious Redirects</h1>
<input aria-hidden="true" id="disableInvidious" type="checkbox" checked>&nbsp;
<label for="disableInvidious" class="checkbox-label">
</label>
</div>
</section>
<section class="options settings_block">
<h1>Nitter Instance</h1>
<input id="nitterInstance" type="url" placeholder="https://nitter.net">
<h1>Invidious Instance</h1>
<input id="invidiousInstance" type="url" placeholder="https://invidio.us">
</section>
<footer>
<a class="button" id="save">Save</a>
</footer>
<script src="./options.js"></script>
<div id="status"></div>
<button id="save">Save</button>
</body>
</html>

26
pages/options/options.js Normal file
View File

@ -0,0 +1,26 @@
'use strict';
let disableNitter = document.querySelector('#disableNitter');
let disableInvidious = document.querySelector('#disableInvidious');
let nitterInstance = document.querySelector('#nitterInstance');
let invidiousInstance = document.querySelector('#invidiousInstance');
chrome.storage.sync.get(
['disableNitter', 'disableInvidious', 'nitterInstance', 'invidiousInstance'],
(result) => {
disableNitter.checked = !result.disableNitter;
disableInvidious.checked = !result.disableInvidious;
nitterInstance.value = result.nitterInstance || '';
invidiousInstance.value = result.invidiousInstance || '';
}
);
document.querySelector('#save').addEventListener('click', () => {
chrome.storage.sync.set({
disableNitter: !disableNitter.checked,
disableInvidious: !disableInvidious.checked,
nitterInstance: nitterInstance.value,
invidiousInstance: invidiousInstance.value
});
window.close();
});

View File

@ -5,7 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="./popup.css" rel="stylesheet">
<link href="../styles.css" rel="stylesheet">
</head>
<body>
@ -14,26 +14,24 @@
<img src="../../images/logo.png" alt="Privacy Redirect logo">
</div>
<small>
<span>Version</span>: 1.0.2</span>
<span>Version</span>: 1.1.1</span>
</small>
</header>
<section id="disableNitter" class="options settings_block">
<section class="options settings_block">
<div class="onoffswitch switch" aria-label="Toggle Nitter redirects">
<h1 id="onoffswitch_label">Nitter Redirects</h1>
<span class="slider round"></span>
<input aria-hidden="true" id="onoffnitter" type="checkbox" checked> <label id="onoffnitter__label"
for="onoffnitter">
<h1>Nitter Redirects</h1>
<input aria-hidden="true" id="disableNitter" type="checkbox" checked>&nbsp;
<label for="disableNitter" class="checkbox-label">
</label>
</div>
</section>
<section id="disableInvidious" class="options settings_block">
<section class="options settings_block">
<div class="onoffswitch switch" aria-label="Toggle Invidious redirects">
<h1 id="onoffinvidious_label">Invidious Redirects</h1>
<span class="slider round"></span>
<input aria-hidden="true" id="onoffinvidious" type="checkbox" checked> <label id="onoffinvidious_label"
for="onoffinvidious">
<h1>Invidious Redirects</h1>
<input aria-hidden="true" id="disableInvidious" type="checkbox" checked>&nbsp;
<label for="disableInvidious" class="checkbox-label">
</label>
</div>
</section>
@ -43,6 +41,7 @@
</footer>
<script src="./popup.js"></script>
</body>
</html>

View File

@ -1,4 +1,25 @@
document.querySelector('#options').addEventListener('click', function () {
'use strict';
let disableNitter = document.querySelector('#disableNitter');
let disableInvidious = document.querySelector('#disableInvidious');
chrome.storage.sync.get(
['disableNitter', 'disableInvidious'],
(result) => {
disableNitter.checked = !result.disableNitter;
disableInvidious.checked = !result.disableInvidious;
}
);
disableNitter.addEventListener('change', (event) => {
chrome.storage.sync.set({ disableNitter: !event.target.checked });
});
disableInvidious.addEventListener('change', (event) => {
chrome.storage.sync.set({ disableInvidious: !event.target.checked });
});
document.querySelector('#options').addEventListener('click', () => {
if (chrome.runtime.openOptionsPage) {
chrome.runtime.openOptionsPage();
} else {

View File

@ -73,11 +73,17 @@ footer a.button {
}
/* Elements */
input[type=url] {
width: 100%;
margin-bottom: 5px;
}
input[type=checkbox] {
opacity: 0;
}
label {
.checkbox-label {
background: grey;
border-radius: 25px;
color: var(--text-main);
@ -91,7 +97,7 @@ label {
width: 50px;
}
label:after {
.checkbox-label:after {
background: #fff;
border-radius: 90px;
content: '';