Internacionalization + spanish traduction

chrome/_locales/en/messages.json

@@ -0,0 +1,28 @@
+{
+    "extDescription": {
+      "message": "Blocks Ads on Twitch.tv.",
+      "description": "The extension short description."
+    },
+    "toggleAdblocker": {
+        "message": "Twitch Adblocker Off / On"
+    },
+    "toggleBlokingAds": {
+        "message": "\"Blocking Ads\" message Off / On",
+        "description": "Toggle the 'blocking ads...' banner"
+    },
+    "realodTabsWarning": {
+        "message": "Whenever you change a setting, you have to reload the Twitch tab(s)."
+    },
+    "popupReminder": {
+        "message": "You can access these settings at any time by clicking on the extension icon"
+    },
+    "installThanks": {
+        "message": "Thank you for installing Twitch Adblock!"
+    },
+    "disableOtherAdblockers": {
+        "message": "In order to provide full functionality, please make sure that you disable any other Adblocker for Twitch."
+    },
+    "blockingAds":{
+        "message": "Blocking ads..."
+    }
+}

chrome/_locales/es/messages.json

@@ -0,0 +1,28 @@
+{
+    "extDescription": {
+      "message": "Bloquea los anuncios de Twitch.tv.",
+      "description": "La descripción de la extensión."
+    },
+    "toggleAdblocker": {
+        "message": "Bloquear anuncios Off / On"
+    },
+    "toggleBlokingAds": {
+        "message": "Mensaje de \"Bloqueando anuncios\" Off / On",
+        "description": "Alterna el mensaje de 'Bloqueando anuncios...'"
+    },
+    "realodTabsWarning": {
+        "message": "Cada vez que cambies alguna configuracion, debes volver a recargar la(s) pestaña(s) de Twitch."
+    },
+    "popupReminder": {
+        "message": "Puedes acceder a estas configuraciónes en cualquier momento haciendo clic el icono de la extensión"
+    },
+    "installThanks": {
+        "message": "¡Gracias por instalar Twitch Adblock!"
+    },
+    "disableOtherAdblockers": {
+        "message": "Con el fin de proporcionar una funcionalidad completa, asegúrese de deshabilitar cualquier otro bloqueador de anuncios para Twitch."
+    },
+    "blockingAds":{
+        "message": "Bloqueando anuncios..."
+    }
+}

chrome/manifest.json

@@ -1,5 +1,5 @@
 {
-  "description": "Blocks Ads on Twitch.tv.",
+  "description": "__MSG_extDescription__",
   "manifest_version": 3,
   "name": "Twitch Adblock",
   "version": "5.4.0",
@@ -34,5 +34,6 @@
   "web_accessible_resources": [{
     "resources": ["remove_video_ads.js"],
     "matches": ["https://*.twitch.tv/*"]
-  }]
+  }],
+  "default_locale": "en"
 }

chrome/popup/index.html

@@ -89,20 +89,21 @@
         <div id="popup-content">
             <img src="logo.png" height="100%" width="100%" alt="Twitch Adblock" />
             <p class="p2">
-                Twitch Adblocker Off / On
+                <span data-i18n="toggleAdblocker">Twitch Adblocker Off / On</span> 
                 <label class="switch">
                     <input type="checkbox" name="checkbox1" checked />
                     <span class="slider round"></span>
                 </label>
             </p>
             <p class="p2">
-                "Blocking Ads" message Off / On
+                <span data-i18n="toggleBlokingAds">"Blocking Ads" message Off / On</span> 
+
                 <label class="switch">
                     <input type="checkbox" name="checkbox2" checked />
                     <span class="slider round"></span>
                 </label>
             </p>
-            <p class="p2">Whenever you change a setting, you have to reload the Twitch tab(s).</p>
+            <p class="p2" data-i18n="realodTabsWarning">Whenever you change a setting, you have to reload the Twitch tab(s).</p>
             <p class="p2" style="text-align: center;">
                 <a href="https://github.com/cleanlock/VideoAdBlockForTwitch" target="_blank"><img src="github.png" alt="Github" height="42px" width="42px"></a>
                 <a href="https://discord.gg/PSgWqf3v8V" target="_blank"><img src="discord.png" alt="Discord" height="42px" width="42px" style="margin-left: 10px;"></a>

chrome/popup/install.html

@@ -88,23 +88,23 @@
     <body>
         <div id="popup-content">
             <img src="logo.png" height="100%" width="100%" alt="Twitch Adblock" />
-            <p class="p1">Thank you for installing Twitch Adblock!</p>
-            <p class="p1">In order to provide full functionality, please make sure that you disable any other Adblocker for Twitch.</p>
+            <p class="p1" data-i18n="installThanks">Thank you for installing Twitch Adblock!</p>
+            <p class="p1" data-i18n="disableOtherAdblockers">In order to provide full functionality, please make sure that you disable any other Adblocker for Twitch.</p>
             <p class="p2">
-                Twitch Adblocker Off / On
+                <span data-i18n="toggleAdblocker">Twitch Adblocker Off / On</span> 
                 <label class="switch">
                     <input type="checkbox" name="checkbox1" checked />
                     <span class="slider round"></span>
                 </label>
             </p>
             <p class="p2">
-                "Blocking Ads" message Off / On
+                <span data-i18n="toggleBlokingAds">"Blocking Ads" message Off / On</span> 
                 <label class="switch">
                     <input type="checkbox" name="checkbox2" checked />
                     <span class="slider round"></span>
                 </label>
             </p>
-            <p class="p1">You can access these settings at any time by clicking on the extension icon.</p>
+            <p class="p1" data-i18n="popupReminder">You can access these settings at any time by clicking on the extension icon</p>
             <p class="p2" style="text-align: center;">
                 <a href="https://github.com/cleanlock/VideoAdBlockForTwitch" target="_blank"><img src="github.png" alt="Github" height="42px" width="42px"></a>
                 <a href="https://discord.gg/PSgWqf3v8V" target="_blank"><img src="discord.png" alt="Discord" height="42px" width="42px" style="margin-left: 10px;"></a>

chrome/popup/popupjs.js

@@ -50,4 +50,11 @@ function restoreOptions() {
     });
 }
 
-document.addEventListener('DOMContentLoaded', restoreOptions);
+document.addEventListener('DOMContentLoaded', restoreOptions);
+
+// internacionalization (https://stackoverflow.com/questions/25467009/internationalization-of-html-pages-for-my-google-chrome-extension)
+
+document.querySelectorAll('[data-i18n]').forEach(elem => {
+    elem.innerText = chrome.i18n.getMessage(elem.dataset.i18n)
+})
+

chrome/remove_video_ads.js

@@ -135,7 +135,7 @@ window.Worker = class Worker extends oldWorker {
                 if (adBlockDiv == null) {
                     adBlockDiv = getAdBlockDiv();
                 }
-                adBlockDiv.P.textContent = 'Blocking ads...';
+                adBlockDiv.P.textContent = chrome.i18n.getMessage("blockingAds");
                 adBlockDiv.style.display = 'block';
             } else if (e.data.key == 'HideAdBlockBanner') {
                 if (adBlockDiv == null) {