mirror of
https://codeberg.org/Nero/InviTube.git
synced 2024-11-21 23:33:39 +00:00
feat: improve ui and logic
This commit is contained in:
CSF
parent
d2723183a4
commit
82d922b04a
6 changed files with 135 additions and 136 deletions
BIN
InviTube.zip
Normal file
BIN
InviTube.zip
Normal file
Binary file not shown.
|
|
@ -1,12 +1,11 @@
|
||||||
let tabWhitelist = [];
|
let tabWhitelist = [];
|
||||||
|
|
||||||
// Einstellungen ziehen, ContentScript registrieren
|
// Einstellungen ziehen, ContentScript registrieren
|
||||||
browser.storage.local.get(
|
browser.storage.local.get({
|
||||||
{
|
|
||||||
activated: true,
|
activated: true,
|
||||||
instance: "yewtu.be",
|
instance: "yewtu.be",
|
||||||
}
|
})
|
||||||
).then((storage) => {
|
.then((storage) => {
|
||||||
if (storage.activated) {
|
if (storage.activated) {
|
||||||
activateBlocker();
|
activateBlocker();
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -14,12 +13,12 @@ browser.storage.local.get(
|
||||||
}
|
}
|
||||||
|
|
||||||
registerCS(storage.instance);
|
registerCS(storage.instance);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// ContentScript für aktuelle Instanz registrieren
|
// ContentScript für aktuelle Instanz registrieren
|
||||||
async function registerCS(url) {
|
function registerCS(url) {
|
||||||
return await browser.contentScripts.register({
|
browser.contentScripts.register({
|
||||||
js: [{ file: "content.js" }],
|
js: [{ file: "content.js" }],
|
||||||
matches: ["*://" + url + "/*"]
|
matches: ["*://" + url + "/*"]
|
||||||
});
|
});
|
||||||
|
|
@ -27,7 +26,7 @@ async function registerCS(url) {
|
||||||
|
|
||||||
// pageAction anzeigen
|
// pageAction anzeigen
|
||||||
browser.runtime.onMessage.addListener((data, sender) => {
|
browser.runtime.onMessage.addListener((data, sender) => {
|
||||||
if (data.type == "showYoutubePageAction") {
|
if (data === "showYoutubePageAction") {
|
||||||
browser.pageAction.setIcon({
|
browser.pageAction.setIcon({
|
||||||
tabId: sender.tab.id,
|
tabId: sender.tab.id,
|
||||||
path: "icons/youtube.png"
|
path: "icons/youtube.png"
|
||||||
|
|
@ -36,7 +35,8 @@ browser.runtime.onMessage.addListener((data, sender) => {
|
||||||
tabId: sender.tab.id,
|
tabId: sender.tab.id,
|
||||||
title: "Open on YouTube"
|
title: "Open on YouTube"
|
||||||
});
|
});
|
||||||
} else if (data.type == "showInvidiousPageAction") {
|
|
||||||
|
} else if (data === "showInvidiousPageAction") {
|
||||||
browser.pageAction.setIcon({
|
browser.pageAction.setIcon({
|
||||||
tabId: sender.tab.id,
|
tabId: sender.tab.id,
|
||||||
path: "icons/invidious.png"
|
path: "icons/invidious.png"
|
||||||
|
|
@ -126,25 +126,27 @@ browser.webRequest.onBeforeRequest.addListener(async (details) => {
|
||||||
|
|
||||||
// URL Icon Click --> Open on YouTube/Invidious
|
// URL Icon Click --> Open on YouTube/Invidious
|
||||||
browser.pageAction.onClicked.addListener((tab) => {
|
browser.pageAction.onClicked.addListener((tab) => {
|
||||||
browser.storage.local.get({ activated: true, instance: "yewtu.be" }).then(async (storage) => {
|
browser.storage.local.get({
|
||||||
if (tab.url.startsWith("https://www.youtube.com")) {
|
activated: true,
|
||||||
|
instance: "yewtu.be"
|
||||||
|
})
|
||||||
|
.then(async (storage) => {
|
||||||
|
if (tab.url.includes("youtube")) {
|
||||||
browser.tabs.create({
|
browser.tabs.create({
|
||||||
url: "https://" + storage.instance + "/" + tab.url.split("/")[3]
|
url: "https://" + storage.instance + "/" + tab.url.split("/")[3]
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
let newTab = await browser.tabs.create({
|
const newTab = await browser.tabs.create({
|
||||||
url: "https://www.youtube.com/" + tab.url.split("/")[3]
|
url: "https://www.youtube.com/" + tab.url.split("/")[3]
|
||||||
});
|
});
|
||||||
if (!tabWhitelist.includes(newTab.id)) {
|
if (!tabWhitelist.includes(newTab.id))
|
||||||
tabWhitelist.push(newTab.id);
|
tabWhitelist.push(newTab.id);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Close tab -> Remove from whitelist
|
// Close tab -> Remove from whitelist
|
||||||
browser.tabs.onRemoved.addListener((tabId) => {
|
browser.tabs.onRemoved.addListener((tabId) => {
|
||||||
if (tabWhitelist.includes(tabId)) {
|
if (tabWhitelist.includes(tabId))
|
||||||
tabWhitelist.splice(tabWhitelist.indexOf(tabId), 1);
|
tabWhitelist.splice(tabWhitelist.indexOf(tabId), 1);
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
if (location.href.startsWith("https://www.youtube.com")) {
|
if (location.href.startsWith("https://www.youtube.com")) {
|
||||||
browser.runtime.sendMessage({ type: "showInvidiousPageAction" });
|
browser.runtime.sendMessage("showInvidiousPageAction");
|
||||||
} else {
|
} else {
|
||||||
browser.runtime.sendMessage({ type: "showYoutubePageAction" });
|
browser.runtime.sendMessage("showYoutubePageAction");
|
||||||
}
|
}
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"name": "InviTube",
|
"name": "InviTube",
|
||||||
"author": "Indogermane",
|
"author": "Indogermane",
|
||||||
"version": "1.1",
|
"version": "1.2",
|
||||||
"description": "Redirect YouTube to Invidious.",
|
"description": "Redirect YouTube to Invidious.",
|
||||||
"background": {
|
"background": {
|
||||||
"scripts": [
|
"scripts": [
|
||||||
|
|
|
||||||
|
|
@ -1,95 +1,86 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<style>
|
|
||||||
.switch {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 40px;
|
|
||||||
height: 23px;
|
|
||||||
margin: 1.5em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider {
|
<head>
|
||||||
position: absolute;
|
|
||||||
border-radius: 34px;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #ccc;
|
|
||||||
-webkit-transition: .4s;
|
|
||||||
transition: .4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slider:before {
|
|
||||||
position: absolute;
|
|
||||||
border-radius: 34px;
|
|
||||||
content: "";
|
|
||||||
height: 17px;
|
|
||||||
width: 17px;
|
|
||||||
left: 4px;
|
|
||||||
bottom: 3px;
|
|
||||||
background-color: white;
|
|
||||||
-webkit-transition: .4s;
|
|
||||||
transition: .4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .slider {
|
|
||||||
background-color: #009EE0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:focus + .slider {
|
|
||||||
box-shadow: 0 0 1px #009EE0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input:checked + .slider:before {
|
|
||||||
-webkit-transform: translateX(26px);
|
|
||||||
-ms-transform: translateX(26px);
|
|
||||||
transform: translateX(16px);
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 1.4em;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.textfield {
|
|
||||||
text-align: center;
|
|
||||||
background-color: #131313;
|
|
||||||
color: white;
|
|
||||||
font-size: 1em;
|
|
||||||
border: none;
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
outline: none;
|
|
||||||
margin: 1.5em 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#saveBtn {
|
|
||||||
margin: 1.5em 0;
|
|
||||||
border-radius: 0;
|
|
||||||
font-size: 1em;
|
|
||||||
padding: .5em 1em;
|
|
||||||
border: none;
|
|
||||||
background-color: #131313;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
</head>
|
|
||||||
<body bgcolor="202023" style="padding: 2em">
|
<style>
|
||||||
<form>
|
:root {
|
||||||
<p>
|
color-scheme: dark;
|
||||||
Instance URL:
|
}
|
||||||
<input id="instance" class="textfield" placeholder="piped.kavin.rocks"/>
|
|
||||||
<br>
|
body {
|
||||||
<button id="saveBtn" type="submit">Save</button>
|
background-color: #23222b;
|
||||||
</p>
|
padding-top: 2em;
|
||||||
</form>
|
padding-left: 5em;
|
||||||
|
padding-right: 5em;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="button"] {
|
||||||
|
text-align: center;
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="button"]:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus {
|
||||||
|
outline: 1px solid #006699;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red-border {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
table input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-2 {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-3 {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-4 {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt-12 {
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded {
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<label for="instance">Instance URL</label>
|
||||||
|
<input id="instance" placeholder="yewtu.be" class="rounded" />
|
||||||
|
<input id="saveBtn" type="button" class="rounded mt-2" value="Save" />
|
||||||
<script src="options.js"></script>
|
<script src="options.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,23 +1,29 @@
|
||||||
// Save options
|
|
||||||
document.querySelector("form").addEventListener("submit", (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
let instance = document.querySelector("#instance").value.trim();
|
|
||||||
instance = instance.replace(/^https?:?\/?\/?/, '').replace('\/$');
|
|
||||||
if (!instance) {
|
|
||||||
return alert("Please fill out the fields!");
|
|
||||||
}
|
|
||||||
|
|
||||||
browser.storage.local.set({
|
|
||||||
instance: instance,
|
|
||||||
}).then(() => alert("Saved!"));
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// Restore options
|
// Restore options
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
browser.storage.local.get({
|
browser.storage.local.get({
|
||||||
instance: "yewtu.be",
|
instance: "yewtu.be",
|
||||||
}).then((item) => {
|
}).then((storage) => {
|
||||||
document.querySelector("#instance").value = item.instance;
|
document.querySelector("#instance").value = storage.instance;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Save options
|
||||||
|
const saveBtn = document.getElementById("saveBtn");
|
||||||
|
|
||||||
|
saveBtn.addEventListener("click", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const instance = document.querySelector("#instance").value.trim().replace(/^https?:\/\/*|\/$/g, '');
|
||||||
|
if (!instance) return alert("Please fill out the fields!");
|
||||||
|
|
||||||
|
browser.storage.local.set({
|
||||||
|
instance,
|
||||||
|
}).then(() => {
|
||||||
|
saveBtn.disabled = true;
|
||||||
|
saveBtn.value = "Saved!";
|
||||||
|
setTimeout(() => {
|
||||||
|
saveBtn.disabled = false;
|
||||||
|
saveBtn.value = "Save";
|
||||||
|
}, 3000)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue