diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index d5684bb0..7ebbc3ab 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -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:"
}
}
diff --git a/help/index_en.html b/help/index_en.html
index ac3a0987..5db3c81f 100644
--- a/help/index_en.html
+++ b/help/index_en.html
@@ -13,7 +13,7 @@
- Created By Ajay Ramachandran
+ Created By Ajay Ramachandran
Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions.
diff --git a/icons/newprofilepic.jpg b/icons/newprofilepic.jpg
new file mode 100644
index 00000000..2ffbe7ba
Binary files /dev/null and b/icons/newprofilepic.jpg differ
diff --git a/manifest.json b/manifest.json
index 99f48a5f..a287db2b 100644
--- a/manifest.json
+++ b/manifest.json
@@ -67,5 +67,6 @@
"128": "icons/LogoSponsorBlocker128px.png",
"256": "icons/LogoSponsorBlocker256px.png"
},
+ "options_page": "options/options.html",
"manifest_version": 2
}
diff --git a/options/options.css b/options/options.css
new file mode 100644
index 00000000..e67d956c
--- /dev/null
+++ b/options/options.css
@@ -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;
+}
\ No newline at end of file
diff --git a/options/options.html b/options/options.html
new file mode 100644
index 00000000..45983d58
--- /dev/null
+++ b/options/options.html
@@ -0,0 +1,190 @@
+
+ Options - SponsorBlock
+
+
+
+
+
+
+
+
+
+
+
+ SponsorBlock
+
+
+
+
__MSG_createdBy__ Ajay Ramachandran
+
+
__MSG_Options__
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
__MSG_autoSkipDescription__
+
+
+
+
+
+
+
+ __MSG_setStartSponsorShortcut__
+
+
+
+
+
+
+ __MSG_keybindDescription__
+
+
+
+
+
+
+
+
+
+
+
+
+
+ __MSG_setSubmitKeybind__
+
+
+
+
+
+
+ __MSG_keybindDescription__
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
__MSG_hideButtonsDescription__
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
__MSG_whatInfoButton__
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
__MSG_whatDeleteButton__
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
__MSG_whatViewTracking__
+
+
+
+
+
+
+
+ __MSG_changeUserID__
+
+
+
+
+
__MSG_whatChangeUserID__
+
+
+
+
+
+
+
+
+
+
+ __MSG_setUserID__
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/options/options.js b/options/options.js
new file mode 100644
index 00000000..d1fef77b
--- /dev/null
+++ b/options/options.js
@@ -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});
+}
\ No newline at end of file
diff --git a/popup.html b/popup.html
index dffd393d..6d453871 100644
--- a/popup.html
+++ b/popup.html
@@ -7,7 +7,7 @@
-
diff --git a/popup.js b/popup.js
index af4d3f26..113e44cc 100644
--- a/popup.js
+++ b/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);
diff --git a/utils.js b/utils.js
index 29faebff..f3ed54ea 100644
--- a/utils.js
+++ b/utils.js
@@ -56,23 +56,34 @@ 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];
+
+ let localizedMessage = getLocalizedMessage(obj.innerHTML.toString());
+ if (localizedMessage) obj.innerHTML = localizedMessage;
- var valStrH = obj.innerHTML.toString();
- var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1)
- {
- return v1 ? chrome.i18n.getMessage(v1) : "";
- });
-
- if(valNewH != valStrH)
- {
- obj.innerHTML = valNewH;
+ // 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 != text) {
+ return valNewH;
+ } else {
+ return false;
+ }
+}
+
function generateUserID(length = 36) {
let charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let result = "";