Add popup & options pages

This commit is contained in:
Simon Brazell 2019-09-29 23:04:24 +10:00
parent 16051e71bf
commit 2738833c54
13 changed files with 242 additions and 4 deletions

View File

Before

Width:  |  Height:  |  Size: 406 KiB

After

Width:  |  Height:  |  Size: 406 KiB

View File

Before

Width:  |  Height:  |  Size: 792 KiB

After

Width:  |  Height:  |  Size: 792 KiB

View File

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
images/icon16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 976 B

BIN
images/icon32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
images/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View File

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

View File

@ -1,7 +1,7 @@
{ {
"name": "Privacy Redirect", "name": "Privacy Redirect",
"description": "Redirects Twitter & Youtube requests to privacy friendly alternatives (Nitter & Invidious).", "description": "Redirects Twitter & Youtube requests to privacy friendly alternatives (Nitter & Invidious).",
"version": "1.0.0", "version": "1.0.2",
"manifest_version": 2, "manifest_version": 2,
"background": { "background": {
"scripts": [ "scripts": [
@ -9,10 +9,13 @@
] ]
}, },
"icons": { "icons": {
"48": "img/icon48.png", "16": "images/icon16.png",
"128": "img/icon128.png" "32": "images/icon32.png",
"48": "images/icon48.png",
"128": "images/icon128.png"
}, },
"permissions": [ "permissions": [
"storage",
"webRequest", "webRequest",
"webRequestBlocking", "webRequestBlocking",
"*://twitter.com/*", "*://twitter.com/*",
@ -23,5 +26,18 @@
"*://youtube-nocookie.com/*", "*://youtube-nocookie.com/*",
"*://www.youtube-nocookie.com/*", "*://www.youtube-nocookie.com/*",
"*://m.youtube.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
}
} }

View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension 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>
<label>
<input type="checkbox" id="like">
I like colors.
</label>
<div id="status"></div>
<button id="save">Save</button>
</body>
</html>

140
pages/popup/popup.css Normal file
View File

@ -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
}

48
pages/popup/popup.html Normal file
View File

@ -0,0 +1,48 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="./popup.css" rel="stylesheet">
</head>
<body>
<header>
<div class="logo-container">
<img src="../../images/logo.png" alt="Privacy Redirect logo">
</div>
<small>
<span>Version</span>: 1.0.2</span>
</small>
</header>
<section id="disableNitter" 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">
</label>
</div>
</section>
<section id="disableInvidious" 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">
</label>
</div>
</section>
<footer>
<a class="button" id="options" target="_blank">Options</a>
</footer>
<script src="./popup.js"></script>
</body>
</html>

7
pages/popup/popup.js Normal file
View File

@ -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'));
}
});