3.0 release

Extensions/combined/_locales/en/messages.json

@@ -31,5 +31,20 @@
     },
     "textUpdate": {
         "message": "update to"
+    },
+    "version30installed": {
+        "message": "Version 4.0.0.0 installed"
+    },
+    "whatsnew": {
+        "message": "What's new"
+    },
+    "shortsSupport": {
+        "message": "YouTube Shorts Support"
+    },
+    "customColors": {
+        "message": "Custom colors for dislike bar and buttons"
+    },
+    "customNumberFormats": {
+        "message": "Custom number formats"
     }
 }

Extensions/combined/_locales/en_GB/messages.json

@@ -1,35 +0,0 @@
-{
-    "extensionName": {
-        "message": "Return YouTube Dislike"
-    },
-    "extensionDesc": {
-        "message": "Returns ability to see dislikes"
-    },
-    "textDeveloper": {
-        "message": "by Dmitry Selivanov & Community"
-    },
-    "linkWebsite": {
-        "message": "Website"
-    },
-    "linkFAQ": {
-        "message": "FAQ"
-    },
-    "linkDonate": {
-        "message": "Donate"
-    },
-    "linkHelp": {
-        "message": "Help"
-    },
-    "legendSettings": {
-        "message": "Settings"
-    },
-    "textSettings": {
-        "message": "Disable like/dislike submission"
-    },
-    "textSettingsHover": {
-        "message": "Stops counting your likes and dislikes."
-    },
-    "textUpdate": {
-        "message": "update to"
-    }
-}

Extensions/combined/_locales/en_US/messages.json

@@ -1,35 +0,0 @@
-{
-    "extensionName": {
-        "message": "Return YouTube Dislike"
-    },
-    "extensionDesc": {
-        "message": "Returns ability to see dislikes"
-    },
-    "textDeveloper": {
-        "message": "by Dmitry Selivanov & Community"
-    },
-    "linkWebsite": {
-        "message": "Website"
-    },
-    "linkFAQ": {
-        "message": "FAQ"
-    },
-    "linkDonate": {
-        "message": "Donate"
-    },
-    "linkHelp": {
-        "message": "Help"
-    },
-    "legendSettings": {
-        "message": "Settings"
-    },
-    "textSettings": {
-        "message": "Disable like/dislike submission"
-    },
-    "textSettingsHover": {
-        "message": "Stops counting your likes and dislikes."
-    },
-    "textUpdate": {
-        "message": "update to"
-    }
-}

Extensions/combined/_locales/es_419/messages.json

@@ -1,35 +0,0 @@
-{
-    "extensionName": {
-        "message": "Regresar los Dislikes de YouTube"
-    },
-    "extensionDesc": {
-        "message": "Regresa la posibilidad de ver los dislikes"
-    },
-    "textDeveloper": {
-        "message": "por Dmitry Selivanov y la Comunidad"
-    },
-    "linkWebsite": {
-        "message": "Página web"
-    },
-    "linkFAQ": {
-        "message": "P+F"
-    },
-    "linkDonate": {
-        "message": "Donar"
-    },
-    "linkHelp": {
-        "message": "Ayuda"
-    },
-    "legendSettings": {
-        "message": "Ajustes"
-    },
-    "textSettings": {
-        "message": "Desactivar los dislikes"
-    },
-    "textSettingsHover": {
-        "message": "Dejar de contar los dislikes."
-    },
-    "textUpdate": {
-        "message": "actualizar a"
-    }
-}

Extensions/combined/_locales/ru/messages.json

@@ -1,9 +1,9 @@
 {
     "extensionName": {
-        "message": "Возвращение отметки не нравится YouTube"
+        "message": "Return YouTube Dislike"
     },
     "extensionDesc": {
-        "message": "Возвращает способность видеть отметки не нравится"
+        "message": "Возвращает способность видеть дизлайки"
     },
     "textDeveloper": {
         "message": "Дмитрий Селиванов и сообщество"
@@ -24,12 +24,27 @@
         "message": "Настройки"
     },
     "textSettings": {
-        "message": "Отключить отправку нравится/не нравится"
+        "message": "Отключить отправку лайков/дизлайков"
     },
     "textSettingsHover": {
         "message": "Отключает отправку ваших отметок нравится/не нравится"
     },
     "textUpdate": {
         "message": "обновление до"
+    },
+    "version30installed": {
+        "message": "Версия 4.0.0.0 установлена"
+    },
+    "whatsnew": {
+        "message": "Что нового"
+    },
+    "shortsSupport": {
+        "message": "Поддержка YouTube Shorts"
+    },
+    "customColors": {
+        "message": "Выбор цветов дизлайк бара и кнопок"
+    },
+    "customNumberFormats": {
+        "message": "Выбор формата чисел"
     }
 }

Extensions/combined/changelog/3/changelog_3.0.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8"/>
+  <title title="__MSG_extensionName__">__MSG_extensionName__</title>
+  <link rel="stylesheet" href="/changelog/changelog.css"/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
+    rel="stylesheet"
+  />
+</head>
+<body>
+<div class="container">
+  <svg width="48" viewBox="0 0 24 24">
+    <path
+      d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
+      fill="red"
+    />
+    <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/>
+  </svg>
+
+  <h1 style="margin-bottom: 0" title="__MSG_extensionName__">
+    __MSG_extensionName__
+  </h1>
+  <p style="color: var(--lightGrey); margin-top:0" title="__MSG_textDeveloper__">
+    __MSG_textDeveloper__
+  </p>
+  <h2>__MSG_version30installed__</h2>
+  <h2>__MSG_whatsnew__:</h2>
+
+
+  <div>
+    <ul style="margin-bottom: 5rem">
+      <li>__MSG_shortsSupport__</li>
+      <li>__MSG_customColors__</li>
+      <img style="display: block; margin-bottom: 2rem" src="/changelog/images/colorize_example.jpg"/>
+      <img src="/changelog/images/colorize.jpg"/>
+      <li>__MSG_customNumberFormats__</li>
+      <img src="/changelog/images/number_format.jpg"/>
+    </ul>
+    <center>
+      <button id="link_website" title="__MSG_linkWebsite__">
+        __MSG_linkWebsite__
+      </button>
+      <button
+        style="margin-top: 0.3em; background: #ff0000"
+        id="link_donate"
+        title="__MSG_linkDonate__"
+      >
+        __MSG_linkDonate__
+      </button>
+      <button id="link_discord">Discord</button>
+      <br/>
+      <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">
+        __MSG_linkFAQ__
+      </button>
+      <button id="link_github">GitHub</button>
+      <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">
+        __MSG_linkHelp__
+      </button>
+    </center>
+  </div>
+</div>
+</body>
+<script src="/changelog/changelog.js"></script>
+</html>

Extensions/combined/changelog/changelog.css

@@ -0,0 +1,209 @@
+/* Variables */
+:root {
+  --primary: #cc2929;
+  --accent: #581111;
+
+  --background: #111;
+  --secondary: #272727;
+  --tertiary: #424242;
+  --lightGrey: #999;
+  --white: #fff;
+}
+
+/* Window Styling */
+html,
+body {
+  background-color: var(--background);
+  color: var(--white);
+  min-width: 300px;
+  padding: 0.5em;
+  font-family: "Roboto", Arial, Helvetica, sans-serif;
+  font-size: 16px;
+}
+
+h1 {
+
+}
+
+button {
+  color: var(--white);
+  background: var(--secondary);
+  cursor: pointer;
+  padding: 5px 16px;
+  border: none;
+  border-radius: 4px;
+  font-weight: 500;
+  /* box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
+    0 1px 10px 0 rgb(0 0 0 / 12%); */
+  transition: 0.4s;
+  font-size: 16px;
+}
+
+button:hover {
+  background: #444;
+}
+
+#ext-version {
+  padding: 0.25rem 0.5rem;
+}
+
+#ext-update {
+  cursor: pointer;
+  color: var(--white);
+  text-decoration: none;
+  background: var(--primary);
+  border-radius: 0.25rem;
+}
+#ext-update:hover {
+  text-decoration: underline;
+}
+
+#ext {
+  padding: 0.25rem 0;
+  z-index: 69;
+  position: fixed;
+  background: var(--secondary);
+  margin: 0;
+  bottom: 1.15rem;
+  right: 1.15rem;
+  border-radius: 0.25rem;
+}
+
+.switch:before {
+  content: attr(data-hover);
+  visibility: hidden;
+  width: 250px;
+  background-color: var(--secondary);
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 160%;
+}
+
+.switch:hover:before {
+  visibility: visible;
+}
+
+#advancedToggle {
+  position: fixed;
+  background: none;
+  box-shadow: none;
+  color: var(--lightGrey);
+  top: 26px;
+  right: 26px;
+  padding: 2px;
+  z-index: 69;
+  height: 2rem;
+  width: 2rem;
+}
+
+#advancedToggle:hover {
+  color: var(--white);
+  transform: rotate(-90deg);
+}
+
+#advancedToggle:active {
+  transform: scale(1.5);
+}
+
+#advancedSettings {
+  opacity: 0;
+  pointer-events: none;
+  transition-duration: 0.15s;
+  transition-timing-function: ease-in-out;
+  transform: scale(1.1);
+  position: fixed;
+  background: var(--background);
+  top: 10px;
+  right: 14px;
+  width: calc(100% - 65px);
+  height: calc(100% - 58px);
+  border: 2px solid var(--secondary);
+  border-radius: 0.5rem;
+  padding: 1rem;
+}
+
+#advancedLegend {
+  color: var(--tertiary) !important;
+  /* margin: auto; */ /* Center the label */
+  /* padding: .25rem .5rem; */
+  /* border-radius: .25rem; */
+  /* border: .25rem solid var(--secondary); */
+}
+
+/*   Switches   */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 30px;
+  height: 17px;
+  margin-bottom: 1rem;
+}
+
+.switch:last-of-type {
+  margin-bottom: 0;
+}
+
+.switch input {
+  display: none;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--secondary);
+  transition: 0.4s;
+  border-radius: 34px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 13px;
+  width: 13px;
+  left: 2px;
+  bottom: 2px;
+  background: var(--lightGrey);
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background: var(--accent);
+}
+
+input:checked + .slider:before {
+  transform: translateX(13px);
+  background: var(--primary);
+}
+
+.switchLabel {
+  margin-left: 0.5rem;
+  width: 250px !important;
+  transform: translateX(35px);
+  display: inline-block;
+}
+
+#server-status {
+  height: 72px;
+  width: 90px;
+  /* filter: invert(21%) sepia(100%) saturate(3618%) hue-rotate(102deg)
+    brightness(96%) contrast(108%); */
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+h2 {
+  margin: 0.25rem;
+}

Extensions/combined/changelog/changelog.js

@@ -0,0 +1,57 @@
+/*   Config   */
+const config = {
+  advanced: false,
+  disableVoteSubmission: false,
+  coloredThumbs: false,
+  coloredBar: false,
+  colorTheme: "classic",
+  numberDisplayFormat: "compactShort",
+  numberDisplayRoundDown: true,
+  showAdvancedMessage:
+    '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>',
+  hideAdvancedMessage:
+    '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none" opacity=".87"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm4.3 14.3c-.39.39-1.02.39-1.41 0L12 13.41 9.11 16.3c-.39.39-1.02.39-1.41 0-.39-.39-.39-1.02 0-1.41L10.59 12 7.7 9.11c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0L12 10.59l2.89-2.89c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></svg>',
+
+  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",
+  },
+};
+
+/*   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");
+
+function createLink(url, id) {
+  document.getElementById(id).addEventListener("click", () => {
+    chrome.tabs.create({ url: url });
+  });
+}

Extensions/combined/popup.css

@@ -196,3 +196,9 @@ input:checked + .slider:before {
   /* filter: invert(21%) sepia(100%) saturate(3618%) hue-rotate(102deg)
     brightness(96%) contrast(108%); */
 }
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

Extensions/combined/popup.html

@@ -1,166 +1,166 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta content="text/html; charset=utf-8" />
-    <title title="__MSG_extensionName__">__MSG_extensionName__</title>
-    <link rel="stylesheet" href="popup.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
-      rel="stylesheet"
+<head>
+  <meta content="text/html; charset=utf-8"/>
+  <title title="__MSG_extensionName__">__MSG_extensionName__</title>
+  <link rel="stylesheet" href="popup.css"/>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
+    rel="stylesheet"
+  />
+</head>
+<body>
+<center>
+  <svg width="48" viewBox="0 0 24 24">
+    <path
+      d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
+      fill="red"
     />
-  </head>
-  <body>
-    <center>
-      <svg width="48" viewBox="0 0 24 24">
-        <path
-          d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
-          fill="red"
-        />
-        <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" />
-      </svg>
-      <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
-        __MSG_extensionName__
-      </h1>
-      <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__">
-        __MSG_textDeveloper__
-      </p>
+    <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/>
+  </svg>
+  <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
+    __MSG_extensionName__
+  </h1>
+  <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__">
+    __MSG_textDeveloper__
+  </p>
 
-      <button id="link_website" title="__MSG_linkWebsite__">
-        __MSG_linkWebsite__
-      </button>
-      <button id="link_github">GitHub</button>
-      <button id="link_discord">Discord</button>
-      <br />
-      <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">
-        __MSG_linkFAQ__
-      </button>
-      <button
-        style="margin-top: 0.3em"
-        id="link_donate"
-        title="__MSG_linkDonate__"
-      >
-        __MSG_linkDonate__
-      </button>
-      <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">
-        __MSG_linkHelp__
-      </button>
+  <button id="link_website" title="__MSG_linkWebsite__">
+    __MSG_linkWebsite__
+  </button>
+  <button
+    style="margin-top: 0.3em; background: #ff0000"
+    id="link_donate"
+    title="__MSG_linkDonate__"
+  >
+    __MSG_linkDonate__
+  </button>
+  <button id="link_discord">Discord</button>
+  <br/>
+  <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">
+    __MSG_linkFAQ__
+  </button>
+  <button id="link_github">GitHub</button>
+  <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">
+    __MSG_linkHelp__
+  </button>
 
-      <br />
-      <br />
-      <p style="display: none">API Status: <b id="status"></b></p>
-      <img
-        id="server-status"
-        style="display: none; width: 0.75rem; height: 0.75rem"
-        src="./icons/server.svg"
-        alt=""
-      />
+  <br/>
+  <br/>
+  <p style="display: none">API Status: <b id="status"></b></p>
+  <img
+    id="server-status"
+    style="display: none; width: 0.75rem; height: 0.75rem"
+    src="./icons/server.svg"
+    alt=""
+  />
 
-      <br />
-      <br />
-    </center>
+  <br/>
+  <br/>
+</center>
 
-    <!-- top-right -->
-    <button id="advancedToggle">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        enable-background="new 0 0 24 24"
-        height="24px"
-        viewBox="0 0 24 24"
-        width="24px"
-        fill="currentColor"
-      >
-        <rect fill="none" height="24" width="24" />
-        <path
-          d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"
-        />
-      </svg>
-    </button>
+<!-- top-right -->
+<button id="advancedToggle">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    enable-background="new 0 0 24 24"
+    height="24px"
+    viewBox="0 0 24 24"
+    width="24px"
+    fill="currentColor"
+  >
+    <rect fill="none" height="24" width="24"/>
+    <path
+      d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"
+    />
+  </svg>
+</button>
 
-    <!-- bottom-right -->
-    <div id="ext">
-      <a
-        href="https://returnyoutubedislike.com/install"
-        target="_blank"
-        id="ext-update"
-      ></a>
-      <span id="ext-version"></span>
-    </div>
+<!-- bottom-right -->
+<div id="ext">
+  <a
+    href="https://returnyoutubedislike.com/install"
+    target="_blank"
+    id="ext-update"
+  ></a>
+  <span id="ext-version"></span>
+</div>
 
-    <!-- dialog box -->
-    <fieldset id="advancedSettings">
-      <legend id="advancedLegend" title="__MSG_legendSettings__">
-        __MSG_legendSettings__
-      </legend>
+<!-- dialog box -->
+<fieldset id="advancedSettings">
+  <legend id="advancedLegend" title="__MSG_legendSettings__">
+    __MSG_legendSettings__
+  </legend>
 
-      <label class="switch" data-hover="__MSG_textSettingsHover__">
-        <input type="checkbox" id="disable_vote_submission" />
-        <span class="slider" />
-        <span class="switchLabel" title="__MSG_textSettings__"
-          >__MSG_textSettings__</span
-        >
-      </label>
-      <br />
-      <label class="switch" data-hover="Round down numbers (default YouTube behavior)">
-        <input type="checkbox" id="number_round_down" />
-        <span class="slider" />
-        <span class="switchLabel">Show rounded down numbers</span>
-      </label>
-      <br />
-      <div class="custom-select">
-        <label for="number_format">Number format:</label>
-        <select name="number_format" id="number_format">
-          <option value="compactShort" id="number_format_compactShort"></option>
-          <option value="compactLong" id="number_format_compactLong"></option>
-          <option value="standard" id="number_format_standard"></option>
-        </select>
-      </div>
-      <br />
-      <div class="custom-select">
-        <label class="switch" data-hover="Use custom colors for ratio bar.">
-          <input type="checkbox" id="colored_bar" />
-          <span class="slider" />
-          <span class="switchLabel">Colorize ratio bar</span>
-        </label>
-      </div>
-      <label class="switch" data-hover="Use custom colors for thumb icons.">
-        <input type="checkbox" id="colored_thumbs" />
-        <span class="slider" />
-        <span class="switchLabel">Colorize thumbs</span>
-      </label>
-      <br />
-      <div class="custom-select">
-        <label for="color_theme">Color theme:</label>
-        <select name="color_theme" id="color_theme">
-          <option value="classic" id="color_theme_classic">Classic</option>
-          <option value="accessible" id="color_theme_accessible">
-            Accessible
-          </option>
-          <option value="neon" id="color_theme_neon">Neon</option>
-        </select>
-        <span
-          id="color_theme_example_like"
-          style="
+  <label class="switch" data-hover="__MSG_textSettingsHover__">
+    <input type="checkbox" id="disable_vote_submission"/>
+    <span class="slider"/>
+    <span class="switchLabel" title="__MSG_textSettings__"
+    >__MSG_textSettings__</span
+    >
+  </label>
+  <br/>
+  <label class="switch" data-hover="Round down numbers (default YouTube behavior)">
+    <input type="checkbox" id="number_round_down"/>
+    <span class="slider"/>
+    <span class="switchLabel">Show rounded down numbers</span>
+  </label>
+  <br/>
+  <div class="custom-select">
+    <label for="number_format">Number format:</label>
+    <select name="number_format" id="number_format">
+      <option value="compactShort" id="number_format_compactShort"></option>
+      <option value="compactLong" id="number_format_compactLong"></option>
+      <option value="standard" id="number_format_standard"></option>
+    </select>
+  </div>
+  <br/>
+  <div class="custom-select">
+    <label class="switch" data-hover="Use custom colors for ratio bar.">
+      <input type="checkbox" id="colored_bar"/>
+      <span class="slider"/>
+      <span class="switchLabel">Colorize ratio bar</span>
+    </label>
+  </div>
+  <label class="switch" data-hover="Use custom colors for thumb icons.">
+    <input type="checkbox" id="colored_thumbs"/>
+    <span class="slider"/>
+    <span class="switchLabel">Colorize thumbs</span>
+  </label>
+  <br/>
+  <div class="custom-select">
+    <label for="color_theme">Color theme:</label>
+    <select name="color_theme" id="color_theme">
+      <option value="classic" id="color_theme_classic">Classic</option>
+      <option value="accessible" id="color_theme_accessible">
+        Accessible
+      </option>
+      <option value="neon" id="color_theme_neon">Neon</option>
+    </select>
+    <span
+      id="color_theme_example_like"
+      style="
             display: inline-block;
             vertical-align: text-top;
             width: 1em;
             height: 1em;
           "
-          >&nbsp;</span
-        >
-        <span
-          id="color_theme_example_dislike"
-          style="
+    >&nbsp;</span
+    >
+    <span
+      id="color_theme_example_dislike"
+      style="
             display: inline-block;
             vertical-align: text-top;
             width: 1em;
             height: 1em;
           "
-          >&nbsp;</span
-        >
-      </div>
-    </fieldset>
-  </body>
-  <script src="popup.js"></script>
+    >&nbsp;</span
+    >
+  </div>
+</fieldset>
+</body>
+<script src="popup.js"></script>
 </html>

Extensions/combined/ryd.background.js

@@ -74,6 +74,10 @@ api.runtime.onMessage.addListener((request, sender, sendResponse) => {
   }
 });
 
+api.runtime.onInstalled.addListener(() => {
+  api.tabs.create({url: api.runtime.getURL("/changelog/3/changelog_3.0.html")});
+})
+
 async function sendVote(videoId, vote) {
   api.storage.sync.get(null, async (storageResult) => {
     if (!storageResult.userId || !storageResult.registrationConfirmed) {
@@ -362,6 +366,7 @@ function initializeColorTheme() {
     }
   });
 }
+
 function initializeNumberDisplayFormat() {
   api.storage.sync.get(["numberDisplayFormat"], (res) => {
     if (res.numberDisplayFormat === undefined) {