import { cLog } from "./src/utils";
/* Config */
const config = {
advanced: false,
disableVoteSubmission: false,
coloredThumbs: false,
coloredBar: false,
colorTheme: "classic",
numberDisplayFormat: "compactShort",
numberDisplayRoundDown: true,
showTooltipPercentage: false,
tooltipPercentageMode: "dash_like",
numberDisplayReformatLikes: false,
showAdvancedMessage:
'',
hideAdvancedMessage:
'',
links: {
website: "https://returnyoutubedislike.com",
github: "https://github.com/Anarios/return-youtube-dislike",
discord: "https://discord.gg/mYnESY4Md5",
donate: "https://returnyoutubedislike.com/donate",
faq: "https://returnyoutubedislike.com/faq",
help: "https://returnyoutubedislike.com/help",
changelog: "/changelog/3/changelog_3.0.html"
},
};
/* Change language */
function localizeHtmlPage() {
//Localize by replacing __MSG_***__ meta tags
var objects = document.getElementsByTagName("html");
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) {
return v1 ? chrome.i18n.getMessage(v1) : "";
});
if (valNewH != valStrH) {
obj.innerHTML = valNewH;
}
}
}
localizeHtmlPage();
/* Links */
createLink(config.links.website, "link_website");
createLink(config.links.github, "link_github");
createLink(config.links.discord, "link_discord");
createLink(config.links.faq, "link_faq");
createLink(config.links.donate, "link_donate");
createLink(config.links.help, "link_help");
createLink(config.links.changelog, "link_changelog");
function createLink(url, id) {
document.getElementById(id).addEventListener("click", () => {
chrome.tabs.create({ url: url });
});
}
document
.getElementById("disable_vote_submission")
.addEventListener("click", (ev) => {
chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
});
document.getElementById("colored_thumbs").addEventListener("click", (ev) => {
chrome.storage.sync.set({ coloredThumbs: ev.target.checked });
});
document.getElementById("colored_bar").addEventListener("click", (ev) => {
chrome.storage.sync.set({ coloredBar: ev.target.checked });
});
document.getElementById("color_theme").addEventListener("click", (ev) => {
chrome.storage.sync.set({ colorTheme: ev.target.value });
});
document.getElementById("number_round_down").addEventListener("click", (ev) => {
chrome.storage.sync.set({ numberDisplayRoundDown: ev.target.checked });
updateNumberDisplayFormatContent(ev.target.checked);
});
document.getElementById("number_format").addEventListener("change", (ev) => {
chrome.storage.sync.set({ numberDisplayFormat: ev.target.value });
});
document.getElementById("show_tooltip_percentage").addEventListener("click", (ev) => {
chrome.storage.sync.set({ showTooltipPercentage: ev.target.checked });
});
document.getElementById("tooltip_percentage_mode").addEventListener("change", (ev) => {
chrome.storage.sync.set({ tooltipPercentageMode: ev.target.value });
});
document.getElementById("number_reformat_likes").addEventListener("click", (ev) => {
chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked });
});
/* Advanced Toggle */
const advancedToggle = document.getElementById("advancedToggle");
advancedToggle.addEventListener("click", () => {
const adv = document.getElementById("advancedSettings");
if (config.advanced) {
adv.style.transform = "scale(1.1)";
adv.style.pointerEvents = "none";
adv.style.opacity = "0";
advancedToggle.innerHTML = config.showAdvancedMessage;
config.advanced = false;
} else {
adv.style.transform = "scale(1)";
adv.style.pointerEvents = "auto";
adv.style.opacity = "1";
advancedToggle.innerHTML = config.hideAdvancedMessage;
config.advanced = true;
}
});
initConfig();
function initConfig() {
initializeDisableVoteSubmission();
initializeVersionNumber();
initializeColoredThumbs();
initializeColoredBar();
initializeColorTheme();
initializeNumberDisplayFormat();
initializeNumberDisplayRoundDown();
initializeTooltipPercentage();
initializeTooltipPercentageMode();
initializeNumberDisplayReformatLikes();
}
function initializeVersionNumber() {
const version = chrome.runtime.getManifest().version;
document.getElementById("ext-version").innerHTML = "v" + version;
fetch(
"https://raw.githubusercontent.com/Anarios/return-youtube-dislike/main/Extensions/combined/manifest-chrome.json"
)
.then((response) => response.json())
.then((json) => {
if (compareVersions(json.version, version)) {
document.getElementById("ext-update").innerHTML =
chrome.i18n.getMessage("textUpdate") + " v" + json.version;
document.getElementById("ext-update").style.padding = ".25rem .5rem";
}
});
// .catch(console.error);
}
// returns whether current < latest
function compareVersions(latestStr, currentStr) {
let latestarr = latestStr.split(".");
let currentarr = currentStr.split(".");
let outdated = false;
// goes through version numbers from left to right from greatest to least significant
for (let i = 0; i < Math.max(latestarr.length, currentarr.length); i++) {
let latest = i < latestarr.length ? parseInt(latestarr[i]) : 0;
let current = i < currentarr.length ? parseInt(currentarr[i]) : 0;
if (latest > current) {
outdated = true;
break;
} else if (latest < current) {
outdated = false;
break;
}
}
return outdated;
}
function initializeDisableVoteSubmission() {
chrome.storage.sync.get(["disableVoteSubmission"], (res) => {
handleDisableVoteSubmissionChangeEvent(res.disableVoteSubmission);
});
}
function initializeColoredThumbs() {
chrome.storage.sync.get(["coloredThumbs"], (res) => {
handleColoredThumbsChangeEvent(res.coloredThumbs);
});
}
function initializeColoredBar() {
chrome.storage.sync.get(["coloredBar"], (res) => {
handleColoredBarChangeEvent(res.coloredBar);
});
}
function initializeColorTheme() {
chrome.storage.sync.get(["colorTheme"], (res) => {
handleColorThemeChangeEvent(res.colorTheme);
});
}
function initializeNumberDisplayRoundDown() {
chrome.storage.sync.get(["numberDisplayRoundDown"], (res) => {
handleNumberDisplayRoundDownChangeEvent(res.numberDisplayRoundDown);
});
}
function initializeTooltipPercentage(){
chrome.storage.sync.get(["showTooltipPercentage"], (res) => {
handleShowTooltipPercentageChangeEvent(res.showTooltipPercentage);
});
};
function initializeTooltipPercentageMode() {
chrome.storage.sync.get(["tooltipPercentageMode"], (res) => {
handleTooltipPercentageModeChangeEvent(res.tooltipPercentageMode);
});
};
function initializeNumberDisplayFormat() {
chrome.storage.sync.get(["numberDisplayFormat"], (res) => {
handleNumberDisplayFormatChangeEvent(res.numberDisplayFormat);
});
updateNumberDisplayFormatContent();
}
function updateNumberDisplayFormatContent(roundDown) {
let testValue;
if (roundDown) {
testValue = 123000;
} else {
testValue = 123456;
}
document.getElementById("number_format_compactShort").innerHTML =
getNumberFormatter("compactShort").format(testValue);
document.getElementById("number_format_compactLong").innerHTML =
getNumberFormatter("compactLong").format(testValue);
document.getElementById("number_format_standard").innerHTML =
getNumberFormatter("standard").format(testValue);
}
function initializeNumberDisplayReformatLikes() {
chrome.storage.sync.get(["numberDisplayReformatLikes"], (res) => {
handleNumberDisplayReformatLikesChangeEvent(res.numberDisplayReformatLikes);
});
}
chrome.storage.onChanged.addListener(storageChangeHandler);
function storageChangeHandler(changes, area) {
if (changes.disableVoteSubmission !== undefined) {
handleDisableVoteSubmissionChangeEvent(
changes.disableVoteSubmission.newValue
);
}
if (changes.coloredThumbs !== undefined) {
handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue);
}
if (changes.coloredBar !== undefined) {
handleColoredBarChangeEvent(changes.coloredBar.newValue);
}
if (changes.colorTheme !== undefined) {
handleColorThemeChangeEvent(changes.colorTheme.newValue);
}
if (changes.numberDisplayRoundDown !== undefined) {
handleNumberDisplayRoundDownChangeEvent(
changes.numberDisplayRoundDown.newValue
);
}
if (changes.numberDisplayFormat !== undefined) {
handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
}
if (changes.showTooltipPercentage !== undefined) {
handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue);
}
if (changes.numberDisplayReformatLikes !== undefined) {
handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
}
}
function handleDisableVoteSubmissionChangeEvent(value) {
config.disableVoteSubmission = value;
document.getElementById("disable_vote_submission").checked = value;
}
function handleColoredThumbsChangeEvent(value) {
config.coloredThumbs = value;
document.getElementById("colored_thumbs").checked = value;
}
function handleColoredBarChangeEvent(value) {
config.coloredBar = value;
document.getElementById("colored_bar").checked = value;
}
function handleColorThemeChangeEvent(value) {
if (!value) {
value = "classic";
}
config.colorTheme = value;
document
.getElementById("color_theme")
.querySelector('option[value="' + value + '"]').selected = true;
updateColorThemePreviewContent(value);
}
function updateColorThemePreviewContent(themeName) {
document.getElementById("color_theme_example_like").style.backgroundColor =
getColorFromTheme(themeName, true);
document.getElementById("color_theme_example_dislike").style.backgroundColor =
getColorFromTheme(themeName, false);
}
function handleNumberDisplayRoundDownChangeEvent(value) {
config.numberDisplayRoundDown = value;
document.getElementById("number_round_down").checked = value;
}
function handleNumberDisplayFormatChangeEvent(value) {
config.numberDisplayFormat = value;
document
.getElementById("number_format")
.querySelector('option[value="' + value + '"]').selected = true;
}
function handleShowTooltipPercentageChangeEvent(value) {
config.showTooltipPercentage = value;
document.getElementById("show_tooltip_percentage").checked = value;
};
function handleTooltipPercentageModeChangeEvent(value) {
if (!value) {
value = "dash_like";
}
config.tooltipPercentageMode = value;
document
.getElementById("tooltip_percentage_mode")
.querySelector('option[value="' + value + '"]').selected = true;
};
function handleNumberDisplayReformatLikesChangeEvent(value) {
config.numberDisplayReformatLikes = value;
document.getElementById("number_reformat_likes").checked = value;
}
function getNumberFormatter(optionSelect) {
let formatterNotation;
let formatterCompactDisplay;
let userLocales;
try {
userLocales = new URL(
Array.from(document.querySelectorAll("head > link[rel='search']"))
?.find((n) => n?.getAttribute("href")?.includes("?locale="))
?.getAttribute("href")
)?.searchParams?.get("locale");
} catch {}
switch (optionSelect) {
case "compactLong":
formatterNotation = "compact";
formatterCompactDisplay = "long";
break;
case "standard":
formatterNotation = "standard";
formatterCompactDisplay = "short";
break;
case "compactShort":
default:
formatterNotation = "compact";
formatterCompactDisplay = "short";
}
const formatter = Intl.NumberFormat(
document.documentElement.lang || userLocales || navigator.language,
{
notation: formatterNotation,
compactDisplay: formatterCompactDisplay,
}
);
return formatter;
}
(async function getStatus() {
let status = document.getElementById("status");
let serverStatus = document.getElementById("server-status");
let resp = await fetch(
"https://returnyoutubedislikeapi.com/votes?videoId=YbJOTdZBX1g"
);
let result = await resp.status;
if (result === 200) {
status.innerText = "Online";
status.style.color = "green";
serverStatus.style.filter =
"invert(58%) sepia(81%) saturate(2618%) hue-rotate(81deg) brightness(119%) contrast(129%)";
} else {
status.innerText = "Offline";
status.style.color = "red";
serverStatus.style.filter =
"invert(11%) sepia(100%) saturate(6449%) hue-rotate(3deg) brightness(116%) contrast(115%)";
}
})();
function getColorFromTheme(colorTheme, voteIsLike) {
let colorString;
switch (colorTheme) {
case "accessible":
if (voteIsLike === true) {
colorString = "dodgerblue";
} else {
colorString = "gold";
}
break;
case "neon":
if (voteIsLike === true) {
colorString = "aqua";
} else {
colorString = "magenta";
}
break;
case "classic":
default:
if (voteIsLike === true) {
colorString = "lime";
} else {
colorString = "red";
}
}
return colorString;
}
/* popup-script.js
document.querySelector('#login')
.addEventListener('click', function () {
chrome.runtime.sendMessage({ message: 'get_auth_token' });
});
document.querySelector("#log_off").addEventListener("click", function () {
chrome.runtime.sendMessage({ message: "log_off" });
});
*/