From 2738833c5404031ed06c5e1985ee6f2dd5b359e5 Mon Sep 17 00:00:00 2001 From: Simon Brazell Date: Sun, 29 Sep 2019 23:04:24 +1000 Subject: Add popup & options pages --- images/Screen Shot 1.png | Bin 0 -> 415406 bytes images/Screen Shot 2.png | Bin 0 -> 811174 bytes images/icon128.png | Bin 0 -> 3197 bytes images/icon16.png | Bin 0 -> 976 bytes images/icon32.png | Bin 0 -> 1983 bytes images/icon48.png | Bin 0 -> 1063 bytes images/logo.png | Bin 0 -> 31646 bytes images/small-tile.png | Bin 0 -> 35583 bytes img/Screen Shot 1.png | Bin 415406 -> 0 bytes img/Screen Shot 2.png | Bin 811174 -> 0 bytes img/icon128.png | Bin 3197 -> 0 bytes img/icon48.png | Bin 1063 -> 0 bytes img/small-tile.png | Bin 35583 -> 0 bytes manifest.json | 24 ++++++-- pages/options/options.html | 27 +++++++++ pages/popup/popup.css | 140 +++++++++++++++++++++++++++++++++++++++++++++ pages/popup/popup.html | 48 ++++++++++++++++ pages/popup/popup.js | 7 +++ 18 files changed, 242 insertions(+), 4 deletions(-) create mode 100644 images/Screen Shot 1.png create mode 100644 images/Screen Shot 2.png create mode 100644 images/icon128.png create mode 100644 images/icon16.png create mode 100644 images/icon32.png create mode 100644 images/icon48.png create mode 100644 images/logo.png create mode 100644 images/small-tile.png delete mode 100644 img/Screen Shot 1.png delete mode 100644 img/Screen Shot 2.png delete mode 100644 img/icon128.png delete mode 100644 img/icon48.png delete mode 100644 img/small-tile.png create mode 100644 pages/options/options.html create mode 100644 pages/popup/popup.css create mode 100644 pages/popup/popup.html create mode 100644 pages/popup/popup.js diff --git a/images/Screen Shot 1.png b/images/Screen Shot 1.png new file mode 100644 index 00000000..7363026a Binary files /dev/null and b/images/Screen Shot 1.png differ diff --git a/images/Screen Shot 2.png b/images/Screen Shot 2.png new file mode 100644 index 00000000..f131363d Binary files /dev/null and b/images/Screen Shot 2.png differ diff --git a/images/icon128.png b/images/icon128.png new file mode 100644 index 00000000..ccd689cc Binary files /dev/null and b/images/icon128.png differ diff --git a/images/icon16.png b/images/icon16.png new file mode 100644 index 00000000..1c510cb7 Binary files /dev/null and b/images/icon16.png differ diff --git a/images/icon32.png b/images/icon32.png new file mode 100644 index 00000000..d001aab6 Binary files /dev/null and b/images/icon32.png differ diff --git a/images/icon48.png b/images/icon48.png new file mode 100644 index 00000000..4ddd22eb Binary files /dev/null and b/images/icon48.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 00000000..db4030ff Binary files /dev/null and b/images/logo.png differ diff --git a/images/small-tile.png b/images/small-tile.png new file mode 100644 index 00000000..a3ed077b Binary files /dev/null and b/images/small-tile.png differ diff --git a/img/Screen Shot 1.png b/img/Screen Shot 1.png deleted file mode 100644 index 7363026a..00000000 Binary files a/img/Screen Shot 1.png and /dev/null differ diff --git a/img/Screen Shot 2.png b/img/Screen Shot 2.png deleted file mode 100644 index f131363d..00000000 Binary files a/img/Screen Shot 2.png and /dev/null differ diff --git a/img/icon128.png b/img/icon128.png deleted file mode 100644 index ccd689cc..00000000 Binary files a/img/icon128.png and /dev/null differ diff --git a/img/icon48.png b/img/icon48.png deleted file mode 100644 index 4ddd22eb..00000000 Binary files a/img/icon48.png and /dev/null differ diff --git a/img/small-tile.png b/img/small-tile.png deleted file mode 100644 index a3ed077b..00000000 Binary files a/img/small-tile.png and /dev/null differ diff --git a/manifest.json b/manifest.json index 1a142fd8..d3140805 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "Privacy Redirect", "description": "Redirects Twitter & Youtube requests to privacy friendly alternatives (Nitter & Invidious).", - "version": "1.0.0", + "version": "1.0.2", "manifest_version": 2, "background": { "scripts": [ @@ -9,10 +9,13 @@ ] }, "icons": { - "48": "img/icon48.png", - "128": "img/icon128.png" + "16": "images/icon16.png", + "32": "images/icon32.png", + "48": "images/icon48.png", + "128": "images/icon128.png" }, "permissions": [ + "storage", "webRequest", "webRequestBlocking", "*://twitter.com/*", @@ -23,5 +26,18 @@ "*://youtube-nocookie.com/*", "*://www.youtube-nocookie.com/*", "*://m.youtube.com/" - ] + ], + "browser_action": { + "default_popup": "pages/popup/popup.html", + "default_icon": { + "16": "images/icon16.png", + "32": "images/icon32.png", + "48": "images/icon48.png", + "128": "images/icon128.png" + } + }, + "options_ui": { + "page": "pages/options/options.html", + "open_in_tab": false + } } \ No newline at end of file diff --git a/pages/options/options.html b/pages/options/options.html new file mode 100644 index 00000000..f51f7201 --- /dev/null +++ b/pages/options/options.html @@ -0,0 +1,27 @@ + + + + + My Test Extension Options + + + + + Favorite color: + + + + +
+ + + + \ No newline at end of file diff --git a/pages/popup/popup.css b/pages/popup/popup.css new file mode 100644 index 00000000..eebab8e3 --- /dev/null +++ b/pages/popup/popup.css @@ -0,0 +1,140 @@ +:root { + --text-main: #FFF; + --text-secondary: #000; + --dark-grey: #3C4043; + --white: #FFF; + --active: #FF5B56; + --space: 5px; +} + +body { + color: var(--text-secondary); + margin: 0; + max-width: 400px; + min-width: 240px; + background-color: var(--dark-grey) +} + +header { + background-color: var(--white); + color: var(--text-secondary); + display: flex; + padding: var(--space); +} + +header h1 { + font-size: 2em; +} + +header .logo-container { + margin: var(--space); +} + +header .logo-container img { + width: 100%; +} + +header small { + display: block; + font-size: .70em; + font-weight: bold; + margin: 1%; + width: 100%; + text-align: right; +} + +h1 { + font-size: 14px; + margin: var(--space) auto +} + +h2 { + clear: both; + font-size: 12px; + font-weight: normal; + margin: 0; +} + +h3 { + font-size: 16px; +} + +h1, +h2 { + color: var(--text-main); +} + +footer { + width: 100%; +} + +footer a.button { + margin: var(--space); +} + +/* Elements */ +input[type=checkbox] { + opacity: 0; +} + +label { + background: grey; + border-radius: 25px; + color: var(--text-main); + cursor: pointer; + display: block; + float: right; + font-weight: bold; + height: 30px; + position: relative; + text-indent: -400px; + width: 50px; +} + +label:after { + background: #fff; + border-radius: 90px; + content: ''; + height: 20px; + left: 5px; + position: absolute; + top: 5px; + transition: 0.3s; /* Acts on transform below */ + width: 20px; +} +input:checked+label { + background: var(--active); +} +/* position when active*/ +input:checked+label:after { + left: calc(100% - 5px); + transform: translateX(-100%); +} + +.settings_block { + display: block; + padding: 5px 1em 20px 1em; + border-bottom: var(--dark-grey) solid 1px; +} + +.settings_block h1 { + float: left; +} + +.button { + border: var(--active) solid 1px; + color: var(--text-main); + display: block; + font-size: 12px; + font-weight: bold; + margin: var(--space) auto; + padding: 10px; + text-align: center; + text-decoration: none; +} + +.button:hover { + background-color: var(--active); + color: #fff +} + diff --git a/pages/popup/popup.html b/pages/popup/popup.html new file mode 100644 index 00000000..0e28a99a --- /dev/null +++ b/pages/popup/popup.html @@ -0,0 +1,48 @@ + + + + + + + + + + + +
+
+ Privacy Redirect logo +
+ + Version: 1.0.2 + +
+ +
+
+

Nitter Redirects

+ + +
+
+ +
+
+

Invidious Redirects

+ + +
+
+ + + + + + + \ No newline at end of file diff --git a/pages/popup/popup.js b/pages/popup/popup.js new file mode 100644 index 00000000..0dddb49c --- /dev/null +++ b/pages/popup/popup.js @@ -0,0 +1,7 @@ +document.querySelector('#options').addEventListener('click', function () { + if (chrome.runtime.openOptionsPage) { + chrome.runtime.openOptionsPage(); + } else { + window.open(chrome.runtime.getURL('../options/options.html')); + } +}); \ No newline at end of file -- cgit 1.4.1 From 7249afb8ed86690f9ab7ce0b4bdd604f2c41c291 Mon Sep 17 00:00:00 2001 From: Simon Brazell Date: Mon, 7 Oct 2019 22:59:31 +1100 Subject: Complete options & popup menus --- background.js | 59 ++++++++++++++---- manifest.json | 10 +++- pages/options/options.html | 52 +++++++++++----- pages/options/options.js | 26 ++++++++ pages/popup/popup.css | 140 ------------------------------------------- pages/popup/popup.html | 23 ++++--- pages/popup/popup.js | 23 ++++++- pages/styles.css | 146 +++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 297 insertions(+), 182 deletions(-) create mode 100644 pages/options/options.js delete mode 100644 pages/popup/popup.css create mode 100644 pages/styles.css diff --git a/background.js b/background.js index 2fb698f1..d5c8346a 100644 --- a/background.js +++ b/background.js @@ -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] + }; + } } }, { diff --git a/manifest.json b/manifest.json index d3140805..d2c20b0b 100644 --- a/manifest.json +++ b/manifest.json @@ -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}" + } } } \ No newline at end of file diff --git a/pages/options/options.html b/pages/options/options.html index f51f7201..124aa4bf 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -2,26 +2,46 @@ - My Test Extension Options + + + + + Privacy Redirect Options - Favorite color: - - - - -
- +
+
+

Nitter Redirects

+   + +
+
+ +
+
+

Invidious Redirects

+   + +
+
+ +
+

Nitter Instance

+ +

Invidious Instance

+ +
+ + + + + \ No newline at end of file diff --git a/pages/options/options.js b/pages/options/options.js new file mode 100644 index 00000000..b5c097d7 --- /dev/null +++ b/pages/options/options.js @@ -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(); +}); \ No newline at end of file diff --git a/pages/popup/popup.css b/pages/popup/popup.css deleted file mode 100644 index eebab8e3..00000000 --- a/pages/popup/popup.css +++ /dev/null @@ -1,140 +0,0 @@ -:root { - --text-main: #FFF; - --text-secondary: #000; - --dark-grey: #3C4043; - --white: #FFF; - --active: #FF5B56; - --space: 5px; -} - -body { - color: var(--text-secondary); - margin: 0; - max-width: 400px; - min-width: 240px; - background-color: var(--dark-grey) -} - -header { - background-color: var(--white); - color: var(--text-secondary); - display: flex; - padding: var(--space); -} - -header h1 { - font-size: 2em; -} - -header .logo-container { - margin: var(--space); -} - -header .logo-container img { - width: 100%; -} - -header small { - display: block; - font-size: .70em; - font-weight: bold; - margin: 1%; - width: 100%; - text-align: right; -} - -h1 { - font-size: 14px; - margin: var(--space) auto -} - -h2 { - clear: both; - font-size: 12px; - font-weight: normal; - margin: 0; -} - -h3 { - font-size: 16px; -} - -h1, -h2 { - color: var(--text-main); -} - -footer { - width: 100%; -} - -footer a.button { - margin: var(--space); -} - -/* Elements */ -input[type=checkbox] { - opacity: 0; -} - -label { - background: grey; - border-radius: 25px; - color: var(--text-main); - cursor: pointer; - display: block; - float: right; - font-weight: bold; - height: 30px; - position: relative; - text-indent: -400px; - width: 50px; -} - -label:after { - background: #fff; - border-radius: 90px; - content: ''; - height: 20px; - left: 5px; - position: absolute; - top: 5px; - transition: 0.3s; /* Acts on transform below */ - width: 20px; -} -input:checked+label { - background: var(--active); -} -/* position when active*/ -input:checked+label:after { - left: calc(100% - 5px); - transform: translateX(-100%); -} - -.settings_block { - display: block; - padding: 5px 1em 20px 1em; - border-bottom: var(--dark-grey) solid 1px; -} - -.settings_block h1 { - float: left; -} - -.button { - border: var(--active) solid 1px; - color: var(--text-main); - display: block; - font-size: 12px; - font-weight: bold; - margin: var(--space) auto; - padding: 10px; - text-align: center; - text-decoration: none; -} - -.button:hover { - background-color: var(--active); - color: #fff -} - diff --git a/pages/popup/popup.html b/pages/popup/popup.html index 0e28a99a..889ffcde 100644 --- a/pages/popup/popup.html +++ b/pages/popup/popup.html @@ -5,7 +5,7 @@ - + @@ -14,26 +14,24 @@ Privacy Redirect logo - Version: 1.0.2 + Version: 1.1.1 -
+
-

Nitter Redirects

- -
-
+
-

Invidious Redirects

- -
@@ -43,6 +41,7 @@ + \ No newline at end of file diff --git a/pages/popup/popup.js b/pages/popup/popup.js index 0dddb49c..2837cdb2 100644 --- a/pages/popup/popup.js +++ b/pages/popup/popup.js @@ -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 { diff --git a/pages/styles.css b/pages/styles.css new file mode 100644 index 00000000..5a233524 --- /dev/null +++ b/pages/styles.css @@ -0,0 +1,146 @@ +:root { + --text-main: #FFF; + --text-secondary: #000; + --dark-grey: #3C4043; + --white: #FFF; + --active: #FF5B56; + --space: 5px; +} + +body { + color: var(--text-secondary); + margin: 0; + max-width: 400px; + min-width: 240px; + background-color: var(--dark-grey) +} + +header { + background-color: var(--white); + color: var(--text-secondary); + display: flex; + padding: var(--space); +} + +header h1 { + font-size: 2em; +} + +header .logo-container { + margin: var(--space); +} + +header .logo-container img { + width: 100%; +} + +header small { + display: block; + font-size: .70em; + font-weight: bold; + margin: 1%; + width: 100%; + text-align: right; +} + +h1 { + font-size: 14px; + margin: var(--space) auto +} + +h2 { + clear: both; + font-size: 12px; + font-weight: normal; + margin: 0; +} + +h3 { + font-size: 16px; +} + +h1, +h2 { + color: var(--text-main); +} + +footer { + width: 100%; +} + +footer a.button { + margin: var(--space); +} + +/* Elements */ + +input[type=url] { + width: 100%; + margin-bottom: 5px; +} + +input[type=checkbox] { + opacity: 0; +} + +.checkbox-label { + background: grey; + border-radius: 25px; + color: var(--text-main); + cursor: pointer; + display: block; + float: right; + font-weight: bold; + height: 30px; + position: relative; + text-indent: -400px; + width: 50px; +} + +.checkbox-label:after { + background: #fff; + border-radius: 90px; + content: ''; + height: 20px; + left: 5px; + position: absolute; + top: 5px; + transition: 0.3s; /* Acts on transform below */ + width: 20px; +} +input:checked+label { + background: var(--active); +} +/* position when active*/ +input:checked+label:after { + left: calc(100% - 5px); + transform: translateX(-100%); +} + +.settings_block { + display: block; + padding: 5px 1em 20px 1em; + border-bottom: var(--dark-grey) solid 1px; +} + +.settings_block h1 { + float: left; +} + +.button { + border: var(--active) solid 1px; + color: var(--text-main); + display: block; + font-size: 12px; + font-weight: bold; + margin: var(--space) auto; + padding: 10px; + text-align: center; + text-decoration: none; +} + +.button:hover { + background-color: var(--active); + color: #fff +} + -- cgit 1.4.1