mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-08 20:47:11 +03:00
Ajay Ramachandran
@@ -332,5 +332,17 @@
|
||||
},
|
||||
"userIDChangeWarning": {
|
||||
"message": "Warning: Changing the UserID is permanent. Are you sure you would like to do this? Make sure to backup your old one just in case."
|
||||
},
|
||||
"createdBy": {
|
||||
"message": "Created By"
|
||||
},
|
||||
"autoSkip": {
|
||||
"message": "Auto Skip"
|
||||
},
|
||||
"showSkipNotice": {
|
||||
"message": "Show Notice After A Sponsor Is Skipped"
|
||||
},
|
||||
"keybindCurrentlySet": {
|
||||
"message": ". It is currently set to:"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<center>
|
||||
|
||||
<p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a></p>
|
||||
<p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a> <img src="https://ajay.app/newprofilepic.jpg" height="30" class="profilepiccircle"/></p>
|
||||
|
||||
<p>
|
||||
Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions.
|
||||
|
||||
BIN
icons/newprofilepic.jpg
Normal file
BIN
icons/newprofilepic.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
@@ -65,5 +65,6 @@
|
||||
"128": "icons/LogoSponsorBlocker128px.png",
|
||||
"256": "icons/LogoSponsorBlocker256px.png"
|
||||
},
|
||||
"options_page": "options/options.html",
|
||||
"manifest_version": 2
|
||||
}
|
||||
|
||||
323
options/options.css
Normal file
323
options/options.css
Normal file
@@ -0,0 +1,323 @@
|
||||
/* Options page CSS */
|
||||
body {
|
||||
font-family: Sans-Serif;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.keybind-status {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.small-description {
|
||||
color: white;
|
||||
font-size: 13;
|
||||
}
|
||||
|
||||
.medium-description {
|
||||
color: white;
|
||||
font-size: 15;
|
||||
}
|
||||
|
||||
.option-text-box {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.option-button {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #c00000;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
font-size: 14px;
|
||||
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.option-button:hover {
|
||||
background-color: #fc0303;
|
||||
}
|
||||
|
||||
.option-button.disabled {
|
||||
cursor: default;
|
||||
|
||||
background-color: #520000;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#options {
|
||||
max-width: 60%;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.switch-container:after {
|
||||
content: attr(label-name);
|
||||
position: absolute;
|
||||
padding: 4px;
|
||||
width: max-content;
|
||||
|
||||
font-size: 14px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #707070;
|
||||
}
|
||||
|
||||
.animated * {
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.animated .slider:before {
|
||||
-webkit-transition: .4s;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #fc0303;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(16px);
|
||||
-ms-transform: translateX(16px);
|
||||
transform: translateX(16px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* Boilerplate CSS from https://ajay.app */
|
||||
|
||||
body {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
.projectPreview {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.projectPreviewImage {
|
||||
position: absolute;
|
||||
left: -90;
|
||||
width: 80;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.projectPreviewImageLarge {
|
||||
position: absolute;
|
||||
left: -210;
|
||||
width: 200;
|
||||
top: 50%;
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
|
||||
.projectPreviewImageLargeRight {
|
||||
position: absolute;
|
||||
right: -210;
|
||||
width: 200;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.createdBy {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#title {
|
||||
background-color: #636363;
|
||||
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 50;
|
||||
color: #212121;
|
||||
|
||||
/* height: 100; */
|
||||
|
||||
padding: 20;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
transition: font-size 1s;
|
||||
}
|
||||
|
||||
#title:hover {
|
||||
font-size: 60;
|
||||
|
||||
transition: font-size 1s;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-family: sans-serif;
|
||||
font-size: 40;
|
||||
color: #dad8d8;
|
||||
|
||||
padding-top: 10;
|
||||
|
||||
transition: font-size 0.4s;
|
||||
}
|
||||
|
||||
.subtitle:hover {
|
||||
font-size: 45;
|
||||
|
||||
transition: font-size 0.4s;
|
||||
}
|
||||
|
||||
.profilepic {
|
||||
background-color: #636363 !important;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.profilepiccircle {
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.link {
|
||||
padding: 20;
|
||||
|
||||
height: 80px;
|
||||
|
||||
transition: height 0.2s;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
height: 95px;
|
||||
|
||||
transition: height 0.2s;
|
||||
}
|
||||
|
||||
#contact,.smalllink {
|
||||
font-family: sans-serif;
|
||||
font-size: 25;
|
||||
color: #e8e8e8;
|
||||
|
||||
text-align: center;
|
||||
|
||||
padding: 10;
|
||||
}
|
||||
|
||||
#contact {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p,li {
|
||||
font-family: sans-serif;
|
||||
font-size: 20;
|
||||
color: #c4c4c4;
|
||||
|
||||
padding: 10;
|
||||
}
|
||||
|
||||
p,li,code,a {
|
||||
max-width: 60%;
|
||||
text-align: left;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
@media screen and (orientation:portrait) {
|
||||
p,li,code,a {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.projectPreviewImage {
|
||||
position: unset;
|
||||
width: 130;
|
||||
display: block;
|
||||
margin: auto;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.previewImage {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#recentPostTitle {
|
||||
font-family: sans-serif;
|
||||
font-size: 30;
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
#recentPostDate {
|
||||
font-family: sans-serif;
|
||||
font-size: 15;
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: sans-serif;
|
||||
color: #dad8d8;
|
||||
}
|
||||
|
||||
svg {
|
||||
text-decoration: none;
|
||||
}
|
||||
190
options/options.html
Normal file
190
options/options.html
Normal file
@@ -0,0 +1,190 @@
|
||||
<head>
|
||||
<title>Options - SponsorBlock</title>
|
||||
|
||||
<link href="options.css" rel="stylesheet"/>
|
||||
|
||||
<script src="../utils.js"></script>
|
||||
<script src="options.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="sponsorBlockPageBody">
|
||||
|
||||
<div id="title">
|
||||
<img src="../icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
|
||||
SponsorBlock
|
||||
</div>
|
||||
|
||||
<div class="center">
|
||||
<p class="createdBy">__MSG_createdBy__ <a href="https://ajay.app">Ajay Ramachandran</a> <img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle"/></p>
|
||||
|
||||
<h1>__MSG_Options__</h1>
|
||||
|
||||
<div id="options" class="hidden">
|
||||
|
||||
|
||||
<div option-type="toggle" toggle-type="reverse" sync-option="disableAutoSkip">
|
||||
<label class="switch-container" label-name="__MSG_autoSkip__">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_autoSkipDescription__</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="keybind-change" sync-option="startSponsorKeybind">
|
||||
<div class="option-button trigger-button">
|
||||
__MSG_setStartSponsorShortcut__
|
||||
</div>
|
||||
|
||||
<div class="option-hidden-section hidden">
|
||||
<br/>
|
||||
|
||||
<div class="medium-description keybind-status">
|
||||
__MSG_keybindDescription__
|
||||
</div>
|
||||
|
||||
<span class="medium-description bold keybind-status-key">
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="keybind-change" sync-option="submitKeybind">
|
||||
<div class="option-button trigger-button">
|
||||
__MSG_setSubmitKeybind__
|
||||
</div>
|
||||
|
||||
<div class="option-hidden-section hidden">
|
||||
<br/>
|
||||
|
||||
<div class="medium-description keybind-status">
|
||||
__MSG_keybindDescription__
|
||||
</div>
|
||||
|
||||
<span class="medium-description bold keybind-status-key">
|
||||
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="toggle" toggle-type="reverse" sync-option="hideVideoPlayerControls">
|
||||
<label class="switch-container" label-name="__MSG_showButtons__">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_hideButtonsDescription__</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="toggle" toggle-type="reverse" sync-option="hideInfoButtonPlayerControls">
|
||||
<label class="switch-container" label-name="__MSG_showInfoButton__">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_whatInfoButton__</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="toggle" toggle-type="reverse" sync-option="hideDeleteButtonPlayerControls">
|
||||
<label class="switch-container" label-name="__MSG_showDeleteButton__">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_whatDeleteButton__</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="toggle" sync-option="trackViewCount">
|
||||
<label class="switch-container" label-name="__MSG_enableViewTracking__">
|
||||
<label class="switch">
|
||||
<input type="checkbox" checked>
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_whatViewTracking__</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="text-change" sync-option="userID">
|
||||
<div class="option-button trigger-button">
|
||||
__MSG_changeUserID__
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
<div class="small-description">__MSG_whatChangeUserID__</div>
|
||||
|
||||
<div class="option-hidden-section hidden">
|
||||
<br/>
|
||||
|
||||
<input class="option-text-box" type="text">
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="option-button text-change-set">
|
||||
__MSG_setUserID__
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div option-type="toggle" toggle-type="reverse" sync-option="dontShowNotice">
|
||||
<label class="switch-container" label-name="__MSG_showSkipNotice__">
|
||||
<label class="switch">
|
||||
<input type="checkbox">
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
145
options/options.js
Normal file
145
options/options.js
Normal file
@@ -0,0 +1,145 @@
|
||||
window.addEventListener('DOMContentLoaded', init);
|
||||
|
||||
async function init() {
|
||||
localizeHtmlPage();
|
||||
|
||||
// Set all of the toggle options to the correct option
|
||||
let optionsContainer = document.getElementById("options");
|
||||
let optionsElements = optionsContainer.children;
|
||||
|
||||
// How many checks are left to be done
|
||||
let checksLeft = 0;
|
||||
|
||||
for (let i = 0; i < optionsElements.length; i++) {
|
||||
switch (optionsElements[i].getAttribute("option-type")) {
|
||||
case "toggle":
|
||||
let option = optionsElements[i].getAttribute("sync-option");
|
||||
chrome.storage.sync.get([option], function(result) {
|
||||
let optionResult = result[option];
|
||||
if (optionResult != undefined) {
|
||||
let checkbox = optionsElements[i].querySelector("input");
|
||||
checkbox.checked = optionResult;
|
||||
|
||||
let reverse = optionsElements[i].getAttribute("toggle-type") === "reverse";
|
||||
|
||||
if (reverse) {
|
||||
optionsElements[i].querySelector("input").checked = !optionResult;
|
||||
}
|
||||
|
||||
checkbox.addEventListener("click", () =>{
|
||||
setOptionValue(option, reverse ? !checkbox.checked : checkbox.checked)
|
||||
});
|
||||
}
|
||||
|
||||
checksLeft--;
|
||||
});
|
||||
|
||||
checksLeft++;
|
||||
break;
|
||||
case "text-change":
|
||||
let button = optionsElements[i].querySelector(".trigger-button");
|
||||
button.addEventListener("click", () => activateTextChange(optionsElements[i]));
|
||||
|
||||
break;
|
||||
case "keybind-change":
|
||||
let keybindButton = optionsElements[i].querySelector(".trigger-button");
|
||||
keybindButton.addEventListener("click", () => activateKeybindChange(optionsElements[i]));
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
await wait(() => checksLeft == 0, 1000, 50);
|
||||
|
||||
optionsContainer.classList.remove("hidden");
|
||||
optionsContainer.classList.add("animated");
|
||||
}
|
||||
|
||||
/**
|
||||
* Will trigger the container to ask the user for a keybind.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
function activateKeybindChange(element) {
|
||||
let button = element.querySelector(".trigger-button");
|
||||
if (button.classList.contains("disabled")) return;
|
||||
|
||||
button.classList.add("disabled");
|
||||
|
||||
let option = element.getAttribute("sync-option");
|
||||
|
||||
chrome.storage.sync.get([option], function(result) {
|
||||
let currentlySet = result[option] !== null ? chrome.i18n.getMessage("keybindCurrentlySet") : "";
|
||||
|
||||
let status = element.querySelector(".option-hidden-section > .keybind-status");
|
||||
status.innerText = chrome.i18n.getMessage("keybindDescription") + currentlySet;
|
||||
|
||||
if (result[option] !== null) {
|
||||
let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
|
||||
statusKey.innerText = result[option];
|
||||
}
|
||||
|
||||
element.querySelector(".option-hidden-section").classList.remove("hidden");
|
||||
|
||||
document.addEventListener("keydown", (e) => keybindKeyPressed(element, e), {once: true});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when a key is pressed in an activiated keybind change option.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
* @param {KeyboardEvent} e
|
||||
*/
|
||||
function keybindKeyPressed(element, e) {
|
||||
e = e || window.event;
|
||||
var key = e.key;
|
||||
|
||||
let option = element.getAttribute("sync-option");
|
||||
|
||||
chrome.storage.sync.set({[option]: key});
|
||||
|
||||
let status = element.querySelector(".option-hidden-section > .keybind-status");
|
||||
status.innerText = chrome.i18n.getMessage("keybindDescriptionComplete");
|
||||
|
||||
let statusKey = element.querySelector(".option-hidden-section > .keybind-status-key");
|
||||
statusKey.innerText = key;
|
||||
|
||||
let button = element.querySelector(".trigger-button");
|
||||
|
||||
button.classList.remove("disabled");
|
||||
}
|
||||
|
||||
/**
|
||||
* Will trigger the textbox to appear to be able to change an option's text.
|
||||
*
|
||||
* @param {HTMLElement} element
|
||||
*/
|
||||
function activateTextChange(element) {
|
||||
let button = element.querySelector(".trigger-button");
|
||||
if (button.classList.contains("disabled")) return;
|
||||
|
||||
button.classList.add("disabled");
|
||||
|
||||
let textBox = element.querySelector(".option-text-box");
|
||||
let option = element.getAttribute("sync-option");
|
||||
|
||||
chrome.storage.sync.get([option], function(result) {
|
||||
textBox.value = result[option];
|
||||
|
||||
let setButton = element.querySelector(".text-change-set");
|
||||
setButton.addEventListener("click", () => setOptionValue(option, textBox.value));
|
||||
|
||||
element.querySelector(".option-hidden-section").classList.remove("hidden");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Called when an option has been changed.
|
||||
*
|
||||
* @param {string} option
|
||||
* @param {*} value
|
||||
*/
|
||||
function setOptionValue(option, value) {
|
||||
chrome.storage.sync.set({[option]: value});
|
||||
}
|
||||
96
popup.html
96
popup.html
@@ -7,7 +7,7 @@
|
||||
|
||||
<body class="popupBody">
|
||||
<center>
|
||||
<div id="app" class="popupBody">
|
||||
<div id="app" class="popupBody sponsorBlockPageBody">
|
||||
<h1 class="popupElement">
|
||||
<img src="icons/IconSponsorBlocker256px.png" height="32px" id="sponsorBlockPopupLogo"/>
|
||||
__MSG_Name__
|
||||
@@ -193,101 +193,13 @@
|
||||
<br/>
|
||||
|
||||
<button id="optionsButton" class="dangerButton popupElement">__MSG_Options__</button>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<div id="options" class="popupElement" style="display: none">
|
||||
<br/>
|
||||
|
||||
<h3>__MSG_Options__</h3>
|
||||
|
||||
<button id="disableAutoSkip" class="warningButton popupElement">__MSG_disableAutoSkip__</button>
|
||||
<button id="enableAutoSkip" style="display: none" class="warningButton popupElement">__MSG_enableAutoSkip__</button>
|
||||
<br/>
|
||||
<sub class="popupElement">
|
||||
__MSG_autoSkipDescription__
|
||||
</sub>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<span id="keybindButtons">
|
||||
<button id="setStartSponsorKeybind" class="warningButton popupElement">__MSG_setStartSponsorShortcut__</button>
|
||||
<br/>
|
||||
<br/>
|
||||
<button id="setSubmitKeybind" class="warningButton popupElement">__MSG_setSubmitKeybind__</button>
|
||||
<br/>
|
||||
</span>
|
||||
|
||||
<h2 id="keybindDescription" style="display: none" class="popupElement">__MSG_keybindDescription__</h2>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<button id="hideVideoPlayerControls" class="warningButton popupElement">__MSG_hideButtons__</button>
|
||||
<button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">__MSG_showButtons__</button>
|
||||
<br/>
|
||||
<sub class="popupElement">
|
||||
__MSG_hideButtonsDescription__
|
||||
</sub>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<button id="hideInfoButtonPlayerControls" class="warningButton popupElement">__MSG_hideInfoButton__</button>
|
||||
<button id="showInfoButtonPlayerControls" style="display: none" class="warningButton popupElement">__MSG_showInfoButton__</button>
|
||||
<br/>
|
||||
<sub class="popupElement">
|
||||
__MSG_whatInfoButton__
|
||||
</sub>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<button id="hideDeleteButtonPlayerControls" class="warningButton popupElement">__MSG_hideDeleteButton__</button>
|
||||
<button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton popupElement">__MSG_showDeleteButton__</button>
|
||||
<br/>
|
||||
<sub class="popupElement">
|
||||
__MSG_whatDeleteButton__
|
||||
</sub>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
<button id="changeUserIDButton" class="warningButton popupElement">__MSG_changeUserID__</button>
|
||||
<br/>
|
||||
<sub class="popupElement">
|
||||
__MSG_whatChangeUserID__
|
||||
</sub>
|
||||
|
||||
<div id="changeUserID" class="popupElement" style="display: none">
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<input id="userIDInput" hint="userID"></input>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<button id="setUserID" class="warningButton popupElement">__MSG_setUserID__</button>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<button id="disableSponsorViewTracking" class="warningButton popupElement">__MSG_disableViewTracking__</button>
|
||||
<button id="enableSponsorViewTracking" style="display: none" class="warningButton popupElement">__MSG_enableViewTracking__</button>
|
||||
<br/>
|
||||
<sub class="popupElement">
|
||||
__MSG_whatViewTracking__
|
||||
</sub>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">__MSG_showNotice__</button>
|
||||
</div>
|
||||
</div>
|
||||
</center>
|
||||
</body>
|
||||
|
||||
|
||||
291
popup.js
291
popup.js
@@ -31,22 +31,12 @@ function runThePopup() {
|
||||
"unwhitelistChannel",
|
||||
"disableSkipping",
|
||||
"enableSkipping",
|
||||
// Options
|
||||
"showNoticeAgain",
|
||||
"optionsButton",
|
||||
// More controls
|
||||
"clearTimes",
|
||||
"submitTimes",
|
||||
// options
|
||||
"showNoticeAgain",
|
||||
"disableAutoSkip",
|
||||
"enableAutoSkip",
|
||||
"hideVideoPlayerControls",
|
||||
"showVideoPlayerControls",
|
||||
"hideInfoButtonPlayerControls",
|
||||
"showInfoButtonPlayerControls",
|
||||
"hideDeleteButtonPlayerControls",
|
||||
"showDeleteButtonPlayerControls",
|
||||
"disableSponsorViewTracking",
|
||||
"enableSponsorViewTracking",
|
||||
"optionsButton",
|
||||
"reportAnIssue",
|
||||
// sponsorTimesContributions
|
||||
"sponsorTimesContributionsContainer",
|
||||
@@ -82,11 +72,6 @@ function runThePopup() {
|
||||
"setUsername",
|
||||
"usernameInput",
|
||||
"submitUsername",
|
||||
// UserID
|
||||
"changeUserID",
|
||||
"changeUserIDButton",
|
||||
"userIDInput",
|
||||
"setUserID",
|
||||
// More
|
||||
"submissionSection",
|
||||
"mainControls",
|
||||
@@ -94,10 +79,6 @@ function runThePopup() {
|
||||
"videoFound",
|
||||
"sponsorMessageTimes",
|
||||
"downloadedSponsorMessageTimes",
|
||||
// Keybinds
|
||||
"setStartSponsorKeybind",
|
||||
"setSubmitKeybind",
|
||||
"keybindDescription"
|
||||
].forEach(id => SB[id] = document.getElementById(id));
|
||||
|
||||
//setup click listeners
|
||||
@@ -109,22 +90,8 @@ function runThePopup() {
|
||||
SB.clearTimes.addEventListener("click", clearTimes);
|
||||
SB.submitTimes.addEventListener("click", submitTimes);
|
||||
SB.showNoticeAgain.addEventListener("click", showNoticeAgain);
|
||||
SB.disableAutoSkip.addEventListener("click", () => setAutoSkip(true));
|
||||
SB.enableAutoSkip.addEventListener("click", () => setAutoSkip(false));
|
||||
SB.setStartSponsorKeybind.addEventListener("click", () => setKeybind(true));
|
||||
SB.setSubmitKeybind.addEventListener("click", () => setKeybind(false));
|
||||
SB.hideVideoPlayerControls.addEventListener("click", hideVideoPlayerControls);
|
||||
SB.showVideoPlayerControls.addEventListener("click", showVideoPlayerControls);
|
||||
SB.hideInfoButtonPlayerControls.addEventListener("click", hideInfoButtonPlayerControls);
|
||||
SB.showInfoButtonPlayerControls.addEventListener("click", showInfoButtonPlayerControls);
|
||||
SB.hideDeleteButtonPlayerControls.addEventListener("click", hideDeleteButtonPlayerControls);
|
||||
SB.showDeleteButtonPlayerControls.addEventListener("click", showDeleteButtonPlayerControls);
|
||||
SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracking);
|
||||
SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking);
|
||||
SB.setUsernameButton.addEventListener("click", setUsernameButton);
|
||||
SB.submitUsername.addEventListener("click", submitUsername);
|
||||
SB.changeUserIDButton.addEventListener("click", changeUserIDButton);
|
||||
SB.setUserID.addEventListener("click", setUserID);
|
||||
SB.optionsButton.addEventListener("click", openOptions);
|
||||
SB.reportAnIssue.addEventListener("click", reportAnIssue);
|
||||
SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
|
||||
@@ -138,12 +105,6 @@ function runThePopup() {
|
||||
//current video ID of this tab
|
||||
let currentVideoID = null;
|
||||
|
||||
//is this a YouTube tab?
|
||||
let isYouTubeTab = false;
|
||||
|
||||
// Is the start sponsor keybind currently being set
|
||||
let setStartSponsorKeybind = false;
|
||||
|
||||
//see if discord link can be shown
|
||||
chrome.storage.sync.get(["hideDiscordLink"], function(result) {
|
||||
let hideDiscordLink = result.hideDiscordLink;
|
||||
@@ -182,47 +143,6 @@ function runThePopup() {
|
||||
}
|
||||
});
|
||||
|
||||
//show proper auto skip option
|
||||
chrome.storage.sync.get(["disableAutoSkip"], function(result) {
|
||||
let disableAutoSkip = result.disableAutoSkip;
|
||||
if (disableAutoSkip != undefined && disableAutoSkip) {
|
||||
SB.disableAutoSkip.style.display = "none";
|
||||
SB.enableAutoSkip.style.display = "unset";
|
||||
}
|
||||
});
|
||||
|
||||
//show proper video player controls options
|
||||
chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
|
||||
let hideVideoPlayerControls = result.hideVideoPlayerControls;
|
||||
if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) {
|
||||
SB.hideVideoPlayerControls.style.display = "none";
|
||||
SB.showVideoPlayerControls.style.display = "unset";
|
||||
}
|
||||
});
|
||||
chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
|
||||
let hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls;
|
||||
if (hideInfoButtonPlayerControls != undefined && hideInfoButtonPlayerControls) {
|
||||
SB.hideInfoButtonPlayerControls.style.display = "none";
|
||||
SB.showInfoButtonPlayerControls.style.display = "unset";
|
||||
}
|
||||
});
|
||||
chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
|
||||
let hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls;
|
||||
if (hideDeleteButtonPlayerControls != undefined && hideDeleteButtonPlayerControls) {
|
||||
SB.hideDeleteButtonPlayerControls.style.display = "none";
|
||||
SB.showDeleteButtonPlayerControls.style.display = "unset";
|
||||
}
|
||||
});
|
||||
|
||||
//show proper tracking option
|
||||
chrome.storage.sync.get(["trackViewCount"], function(result) {
|
||||
let trackViewCount = result.trackViewCount;
|
||||
if (trackViewCount != undefined && !trackViewCount) {
|
||||
SB.disableSponsorViewTracking.style.display = "none";
|
||||
SB.enableSponsorViewTracking.style.display = "unset";
|
||||
}
|
||||
});
|
||||
|
||||
//get the amount of times this user has contributed and display it to thank them
|
||||
chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
|
||||
if (result.sponsorTimesContributed != undefined) {
|
||||
@@ -405,13 +325,6 @@ function runThePopup() {
|
||||
);
|
||||
}
|
||||
|
||||
function setVideoID(request) {
|
||||
//if request is undefined, then the page currently being browsed is not YouTube
|
||||
if (request != undefined) {
|
||||
videoID = request.videoID;
|
||||
}
|
||||
}
|
||||
|
||||
function sendSponsorStartMessage() {
|
||||
//the content script will get the message if a YouTube page is open
|
||||
chrome.tabs.query({
|
||||
@@ -927,157 +840,6 @@ function runThePopup() {
|
||||
SB.showNoticeAgain.style.display = "none";
|
||||
}
|
||||
|
||||
function setAutoSkip(value) {
|
||||
chrome.storage.sync.set({"disableAutoSkip": value});
|
||||
|
||||
if (value) {
|
||||
// If it isn't shown, they can't manually skip
|
||||
showNoticeAgain();
|
||||
|
||||
SB.disableAutoSkip.style.display = "none";
|
||||
SB.enableAutoSkip.style.display = "unset";
|
||||
} else {
|
||||
SB.enableAutoSkip.style.display = "none";
|
||||
SB.disableAutoSkip.style.display = "unset";
|
||||
}
|
||||
}
|
||||
|
||||
function hideVideoPlayerControls() {
|
||||
chrome.storage.sync.set({"hideVideoPlayerControls": true});
|
||||
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, function(tabs) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
message: "changeVideoPlayerControlsVisibility",
|
||||
value: true
|
||||
});
|
||||
});
|
||||
|
||||
SB.hideVideoPlayerControls.style.display = "none";
|
||||
SB.showVideoPlayerControls.style.display = "unset";
|
||||
}
|
||||
|
||||
function showVideoPlayerControls() {
|
||||
chrome.storage.sync.set({"hideVideoPlayerControls": false});
|
||||
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, function(tabs) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
message: "changeVideoPlayerControlsVisibility",
|
||||
value: false
|
||||
});
|
||||
});
|
||||
|
||||
SB.hideVideoPlayerControls.style.display = "unset";
|
||||
SB.showVideoPlayerControls.style.display = "none";
|
||||
}
|
||||
|
||||
function hideInfoButtonPlayerControls() {
|
||||
chrome.storage.sync.set({"hideInfoButtonPlayerControls": true});
|
||||
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, function(tabs) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
message: "changeInfoButtonPlayerControlsVisibility",
|
||||
value: true
|
||||
});
|
||||
});
|
||||
|
||||
SB.hideInfoButtonPlayerControls.style.display = "none";
|
||||
SB.showInfoButtonPlayerControls.style.display = "unset";
|
||||
}
|
||||
|
||||
function showInfoButtonPlayerControls() {
|
||||
chrome.storage.sync.set({"hideInfoButtonPlayerControls": false});
|
||||
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, function(tabs) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
message: "changeVideoPlayerCochangeInfoButtonPlayerControlsVisibilityntrolsVisibility",
|
||||
value: false
|
||||
});
|
||||
});
|
||||
|
||||
SB.hideInfoButtonPlayerControls.style.display = "unset";
|
||||
SB.showInfoButtonPlayerControls.style.display = "none";
|
||||
}
|
||||
|
||||
function hideDeleteButtonPlayerControls() {
|
||||
chrome.storage.sync.set({"hideDeleteButtonPlayerControls": true});
|
||||
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, function(tabs) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
message: "changeDeleteButtonPlayerControlsVisibility",
|
||||
value: true
|
||||
});
|
||||
});
|
||||
|
||||
SB.hideDeleteButtonPlayerControls.style.display = "none";
|
||||
SB.showDeleteButtonPlayerControls.style.display = "unset";
|
||||
}
|
||||
|
||||
function showDeleteButtonPlayerControls() {
|
||||
chrome.storage.sync.set({"hideDeleteButtonPlayerControls": false});
|
||||
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, function(tabs) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
message: "changeVideoPlayerCochangeDeleteButtonPlayerControlsVisibilityntrolsVisibility",
|
||||
value: false
|
||||
});
|
||||
});
|
||||
|
||||
SB.hideDeleteButtonPlayerControls.style.display = "unset";
|
||||
SB.showDeleteButtonPlayerControls.style.display = "none";
|
||||
}
|
||||
|
||||
function disableSponsorViewTracking() {
|
||||
chrome.storage.sync.set({"trackViewCount": false});
|
||||
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, function(tabs) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
message: "trackViewCount",
|
||||
value: false
|
||||
});
|
||||
});
|
||||
|
||||
SB.disableSponsorViewTracking.style.display = "none";
|
||||
SB.enableSponsorViewTracking.style.display = "unset";
|
||||
}
|
||||
|
||||
function enableSponsorViewTracking() {
|
||||
chrome.storage.sync.set({"trackViewCount": true});
|
||||
|
||||
chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true
|
||||
}, function(tabs) {
|
||||
chrome.tabs.sendMessage(tabs[0].id, {
|
||||
message: "trackViewCount",
|
||||
value: true
|
||||
});
|
||||
});
|
||||
|
||||
SB.enableSponsorViewTracking.style.display = "none";
|
||||
SB.disableSponsorViewTracking.style.display = "unset";
|
||||
}
|
||||
|
||||
function updateStartTimeChosen() {
|
||||
//update startTimeChosen letiable
|
||||
if (!startTimeChosen) {
|
||||
@@ -1108,8 +870,7 @@ function runThePopup() {
|
||||
|
||||
//make the options div visible
|
||||
function openOptions() {
|
||||
document.getElementById("optionsButtonContainer").style.display = "none";
|
||||
document.getElementById("options").style.display = "unset";
|
||||
chrome.runtime.openOptionsPage();
|
||||
}
|
||||
|
||||
//make the options username setting option visible
|
||||
@@ -1166,22 +927,6 @@ function runThePopup() {
|
||||
SB.setUsername.style.display = "unset";
|
||||
}
|
||||
|
||||
function changeUserIDButton() {
|
||||
//get the user ID
|
||||
chrome.storage.sync.get(["userID"], function(result) {
|
||||
SB.userIDInput.value = result.userID;
|
||||
SB.setUserID.style.display = "unset";
|
||||
SB.userIDInput.style.display = "unset";
|
||||
SB.changeUserID.style.display = "unset";
|
||||
});
|
||||
}
|
||||
|
||||
function setUserID() {
|
||||
if (!confirm(chrome.i18n.getMessage("userIDChangeWarning"))) return;
|
||||
|
||||
chrome.storage.sync.set({"userID": SB.userIDInput.value});
|
||||
}
|
||||
|
||||
//this is not a YouTube video page
|
||||
function displayNoVideo() {
|
||||
document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
|
||||
@@ -1369,34 +1114,6 @@ function runThePopup() {
|
||||
hiddenButton.style.display = "none";
|
||||
}
|
||||
|
||||
function setKeybind(startSponsorKeybind) {
|
||||
document.getElementById("keybindButtons").style.display = "none";
|
||||
|
||||
document.getElementById("keybindDescription").style.display = "initial";
|
||||
document.getElementById("keybindDescription").innerText = chrome.i18n.getMessage("keybindDescription");
|
||||
|
||||
setStartSponsorKeybind = startSponsorKeybind;
|
||||
|
||||
document.addEventListener("keydown", onKeybindSet)
|
||||
}
|
||||
|
||||
function onKeybindSet(e) {
|
||||
e = e || window.event;
|
||||
var key = e.key;
|
||||
|
||||
if (setStartSponsorKeybind) {
|
||||
chrome.storage.sync.set({"startSponsorKeybind": key});
|
||||
} else {
|
||||
chrome.storage.sync.set({"submitKeybind": key});
|
||||
}
|
||||
|
||||
document.removeEventListener("keydown", onKeybindSet);
|
||||
|
||||
document.getElementById("keybindDescription").innerText = chrome.i18n.getMessage("keybindDescriptionComplete") + " " + key;
|
||||
|
||||
document.getElementById("keybindButtons").style.display = "unset";
|
||||
}
|
||||
|
||||
//converts time in seconds to minutes
|
||||
function getTimeInMinutes(seconds) {
|
||||
let minutes = Math.floor(seconds / 60);
|
||||
|
||||
27
utils.js
27
utils.js
@@ -51,20 +51,31 @@ function getYouTubeVideoID(url) {
|
||||
|
||||
function localizeHtmlPage() {
|
||||
//Localize by replacing __MSG_***__ meta tags
|
||||
var objects = document.getElementsByClassName("popupBody")[0].children;
|
||||
var objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children;
|
||||
for (var j = 0; j < objects.length; j++) {
|
||||
var obj = objects[j];
|
||||
|
||||
var valStrH = obj.innerHTML.toString();
|
||||
var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1)
|
||||
{
|
||||
let localizedMessage = getLocalizedMessage(obj.innerHTML.toString());
|
||||
if (localizedMessage) obj.innerHTML = localizedMessage;
|
||||
|
||||
// Try on each attribute
|
||||
let attributes = obj.getAttributeNames();
|
||||
for (const attribute of attributes) {
|
||||
localizedMessage = getLocalizedMessage(obj.getAttribute(attribute).toString());
|
||||
if (localizedMessage) obj.setAttribute(attribute) = localizedMessage;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getLocalizedMessage(text) {
|
||||
var valNewH = text.replace(/__MSG_(\w+)__/g, function(match, v1) {
|
||||
return v1 ? chrome.i18n.getMessage(v1) : "";
|
||||
});
|
||||
|
||||
if(valNewH != valStrH)
|
||||
{
|
||||
obj.innerHTML = valNewH;
|
||||
}
|
||||
if(valNewH != text) {
|
||||
return valNewH;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user