Merge pull request #28 from wanhose/5.4.0

5.4.0

_locales/de/messages.json

@@ -2,5 +2,33 @@
   "appDesc": {
     "description": "Hat jemand Dialoge zur Cookie-Zustimmung gesagt? 😋",
     "message": "Hat jemand Dialoge zur Cookie-Zustimmung gesagt? 😋"
+  },
+  "contextMenuText": {
+    "description": "Webseite melden...",
+    "message": "Webseite melden..."
+  },
+  "footerText": {
+    "description": "Mit <span aria-label=\"Liebe\" role=\"img\">❤️</span> gemacht von",
+    "message": "Mit <span aria-label=\"Liebe\" role=\"img\">❤️</span> gemacht von"
+  },
+  "helpText": {
+    "description": "Hilfe oder Probleme?",
+    "message": "Hilfe oder Probleme?"
+  },
+  "negativeText": {
+    "description": "Ups! Wir entschuldigen uns für die Unannehmlichkeiten, bitte <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">kontaktieren Sie uns</a> <span aria-label=\"Grinsendes Gesicht mit Schweiß\" role=\"img\">😅</span>",
+    "message": "Ups! Wir entschuldigen uns für die Unannehmlichkeiten, bitte <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">kontaktieren Sie uns</a> <span aria-label=\"Grinsendes Gesicht mit Schweiß\" role=\"img\">😅</span>"
+  },
+  "positiveText": {
+    "description": "Dankeschön! Bitte bewerten Sie unsere Erweiterung <a id=\"store\" target=\"_blank\">hier</a> <span aria-label=\"Lächelndes Gesicht mit herzförmigen Augen\" role=\"img\">😍</span>",
+    "message": "Dankeschön! Bitte bewerten Sie unsere Erweiterung <a id=\"store\" target=\"_blank\">hier</a> <span aria-label=\"Lächelndes Gesicht mit herzförmigen Augen\" role=\"img\">😍</span>"
+  },
+  "reviewText": {
+    "description": "Gefällt dir diese Erweiterung?",
+    "message": "Gefällt dir diese Erweiterung?"
+  },
+  "toggleText": {
+    "description": "Essensdialoge in ",
+    "message": "Essensdialoge in "
   }
 }

_locales/en/messages.json

@@ -2,5 +2,33 @@
   "appDesc": {
     "description": "Did someone say cookie consent dialogs? 😋",
     "message": "Did someone say cookie consent dialogs? 😋"
+  },
+  "contextMenuText": {
+    "description": "Report site...",
+    "message": "Report site..."
+  },
+  "footerText": {
+    "description": "Made with <span aria-label=\"Love\" role=\"img\">❤️</span> by",
+    "message": "Made with <span aria-label=\"Love\" role=\"img\">❤️</span> by"
+  },
+  "helpText": {
+    "description": "Help or issues?",
+    "message": "Help or issues?"
+  },
+  "negativeText": {
+    "description": "Ooops! We apologize for the inconvenience, please <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">contact us</a> <span aria-label=\"Grinning face with sweat\" role=\"img\">😅</span>",
+    "message": "Ooops! We apologize for the inconvenience, please <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">contact us</a> <span aria-label=\"Grinning face with sweat\" role=\"img\">😅</span>"
+  },
+  "positiveText": {
+    "description": "Thank you! Please rate our extension <a id=\"store\" target=\"_blank\">here</a> <span aria-label=\"Smiling face with heart-shaped eyes\" role=\"img\">😍</span>",
+    "message": "Thank you! Please rate our extension <a id=\"store\" target=\"_blank\">here</a> <span aria-label=\"Smiling face with heart-shaped eyes\" role=\"img\">😍</span>"
+  },
+  "reviewText": {
+    "description": "Do you like this extension?",
+    "message": "Do you like this extension?"
+  },
+  "toggleText": {
+    "description": "Eating dialogs in ",
+    "message": "Eating dialogs in "
   }
 }

_locales/es/messages.json

@@ -2,5 +2,33 @@
   "appDesc": {
     "description": "¿Alguien dijo diálogos de consentimiento de cookies? 😋",
     "message": "¿Alguien dijo diálogos de consentimiento de cookies? 😋"
+  },
+  "contextMenuText": {
+    "description": "Reportar sitio...",
+    "message": "Reportar sitio..."
+  },
+  "footerText": {
+    "description": "Hecho con <span aria-label=\"Amor\" role=\"img\">❤️</span> por",
+    "message": "Hecho con <span aria-label=\"Amor\" role=\"img\">❤️</span> por"
+  },
+  "helpText": {
+    "description": "¿Ayuda o problemas?",
+    "message": "¿Ayuda o problemas?"
+  },
+  "negativeText": {
+    "description": "¡Vaya! Sentimos lo ocurrido, por favor <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">contacta con nosotros</a> <span aria-label=\"Cara sonriente con sudor\" role=\"img\">😅</span>",
+    "message": "¡Vaya! Sentimos lo ocurrido, por favor <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">contacta con nosotros</a> <span aria-label=\"Cara sonriente con sudor\" role=\"img\">😅</span>"
+  },
+  "positiveText": {
+    "description": "¡Gracias! Por favor valora la extensión <a id=\"store\" target=\"_blank\">aquí</a> <span aria-label=\"Cara sonriente con ojos en forma de corazón\" role=\"img\">😍</span>",
+    "message": "¡Gracias! Por favor valora la extensión <a id=\"store\" target=\"_blank\">aquí</a> <span aria-label=\"Cara sonriente con ojos en forma de corazón\" role=\"img\">😍</span>"
+  },
+  "reviewText": {
+    "description": "¿Te gusta esta extensión?",
+    "message": "¿Te gusta esta extensión?"
+  },
+  "toggleText": {
+    "description": "Comiendo diálogos en ",
+    "message": "Comiendo diálogos en "
   }
 }

_locales/fr/messages.json

@@ -2,5 +2,33 @@
   "appDesc": {
     "description": "Quelqu'un a-t-il dit boîtes de dialogue de consentement aux cookies? 😋",
     "message": "Quelqu'un a-t-il dit boîtes de dialogue de consentement aux cookies? 😋"
+  },
+  "contextMenuText": {
+    "description": "Signaler le site...",
+    "message": "Signaler le site..."
+  },
+  "footerText": {
+    "description": "Fabriqué avec <span aria-label=\"Amour\" role=\"img\">❤️</span> par",
+    "message": "Fabriqué avec <span aria-label=\"Amour\" role=\"img\">❤️</span> par"
+  },
+  "helpText": {
+    "description": "Aide ou problèmes?",
+    "message": "Aide ou problèmes?"
+  },
+  "negativeText": {
+    "description": "Oups! Nous nous excusons pour la gêne occasionnée, veuillez <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">nous contacter</a> <span aria-label=\"Visage souriant de sueur\" role=\"img\">😅</span>",
+    "message": "Oups! Nous nous excusons pour la gêne occasionnée, veuillez <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">nous contacter</a> <span aria-label=\"Visage souriant de sueur\" role=\"img\">😅</span>"
+  },
+  "positiveText": {
+    "description": "Merci! Veuillez évaluer notre extension <a id=\"store\" target=\"_blank\">ici</a> <span aria-label=\"Visage souriant avec des yeux en forme de coeur\" role=\"img\">😍</span>",
+    "message": "Merci! Veuillez évaluer notre extension <a id=\"store\" target=\"_blank\">ici</a> <span aria-label=\"Visage souriant avec des yeux en forme de coeur\" role=\"img\">😍</span>"
+  },
+  "reviewText": {
+    "description": "Aimez-vous cette extension?",
+    "message": "Aimez-vous cette extension?"
+  },
+  "toggleText": {
+    "description": "Manger des dialogues dans ",
+    "message": "Manger des dialogues dans "
   }
 }

_locales/it/messages.json

@@ -2,5 +2,33 @@
   "appDesc": {
     "description": "Qualcuno ha detto finestre di dialogo per il consenso ai cookie? 😋",
     "message": "Qualcuno ha detto finestre di dialogo per il consenso ai cookie? 😋"
+  },
+  "contextMenuText": {
+    "description": "Segnala sito...",
+    "message": "Segnala sito..."
+  },
+  "footerText": {
+    "description": "Realizzato con <span aria-label=\"Amore\" role=\"img\">❤️</span> da",
+    "message": "Realizzato con <span aria-label=\"Amore\" role=\"img\">❤️</span> da"
+  },
+  "helpText": {
+    "description": "Aiuto o problemi?",
+    "message": "Aiuto o problemi?"
+  },
+  "negativeText": {
+    "description": "Ops! Ci scusiamo per l'inconveniente, per favore <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">contattaci</a> <span aria-label=\"Faccina sorridente con il sudore\" role=\"img\">😅</span>",
+    "message": "Ops! Ci scusiamo per l'inconveniente, per favore <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">contattaci</a> <span aria-label=\"Faccina sorridente con il sudore\" role=\"img\">😅</span>"
+  },
+  "positiveText": {
+    "description": "Grazie! Valuta la nostra estensione <a id=\"store\" target=\"_blank\">qui</a> <span aria-label=\"Faccina sorridente con occhi a forma di cuore\" role=\"img\">😍</span>",
+    "message": "Grazie! Valuta la nostra estensione <a id=\"store\" target=\"_blank\">qui</a> <span aria-label=\"Faccina sorridente con occhi a forma di cuore\" role=\"img\">😍</span>"
+  },
+  "reviewText": {
+    "description": "Ti piace questa estensione?",
+    "message": "Ti piace questa estensione?"
+  },
+  "toggleText": {
+    "description": "Mangiare dialoghi in ",
+    "message": "Mangiare dialoghi in "
   }
 }

_locales/pt_BR/messages.json

@@ -2,5 +2,33 @@
   "appDesc": {
     "description": "Alguém disse diálogos de consentimento de cookies? 😋",
     "message": "Alguém disse diálogos de consentimento de cookies? 😋"
+  },
+  "contextMenuText": {
+    "description": "Reportar site...",
+    "message": "Reportar site..."
+  },
+  "footerText": {
+    "description": "Feito com <span aria-label=\"Amor\" role=\"img\">❤️</span> por",
+    "message": "Feito com <span aria-label=\"Amor\" role=\"img\">❤️</span> por"
+  },
+  "helpText": {
+    "description": "Ajuda ou problemas?",
+    "message": "Ajuda ou problemas?"
+  },
+  "negativeText": {
+    "description": "Opa! Pedimos desculpas pelo transtorno, <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>",
+    "message": "Opa! Pedimos desculpas pelo transtorno, <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>"
+  },
+  "positiveText": {
+    "description": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>",
+    "message": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>"
+  },
+  "reviewText": {
+    "description": "Você gosta desta extensão?",
+    "message": "Você gosta desta extensão?"
+  },
+  "toggleText": {
+    "description": "Comer diálogos em ",
+    "message": "Comer diálogos em "
   }
 }

_locales/pt_PT/messages.json

@@ -2,5 +2,33 @@
   "appDesc": {
     "description": "Alguém disse diálogos de consentimento de cookies? 😋",
     "message": "Alguém disse diálogos de consentimento de cookies? 😋"
+  },
+  "contextMenuText": {
+    "description": "Reportar site...",
+    "message": "Reportar site..."
+  },
+  "footerText": {
+    "description": "Feito com <span aria-label=\"Amor\" role=\"img\">❤️</span> por",
+    "message": "Feito com <span aria-label=\"Amor\" role=\"img\">❤️</span> por"
+  },
+  "helpText": {
+    "description": "Ajuda ou problemas?",
+    "message": "Ajuda ou problemas?"
+  },
+  "negativeText": {
+    "description": "Opa! Pedimos desculpas pelo transtorno, <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>",
+    "message": "Opa! Pedimos desculpas pelo transtorno, <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">entre em contato conosco</a> <span aria-label=\"Rosto sorridente com suor\" role=\"img\">😅</span>"
+  },
+  "positiveText": {
+    "description": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>",
+    "message": "Obrigado! Avalie nossa extensão <a id=\"store\" target=\"_blank\">aqui</a> <span aria-label=\"Rosto sorridente com olhos em formato de coração\" role =\"img\">😍</span>"
+  },
+  "reviewText": {
+    "description": "Você gosta desta extensão?",
+    "message": "Você gosta desta extensão?"
+  },
+  "toggleText": {
+    "description": "Comer diálogos em ",
+    "message": "Comer diálogos em "
   }
 }

_locales/ro/messages.json

@@ -2,5 +2,33 @@
   "appDesc": {
     "description": "A spus cineva dialoguri de consimțământ pentru cookie? 😋",
     "message": "A spus cineva dialoguri de consimțământ pentru cookie? 😋"
+  },
+  "contextMenuText": {
+    "description": "Raportați site-ul...",
+    "message": "Raportați site-ul..."
+  },
+  "footerText": {
+    "description": "Realizat cu <span aria-label=\"Dragoste\" role=\"img\">❤️</span> de",
+    "message": "Realizat cu <span aria-label=\"Dragoste\" role=\"img\">❤️</span> de"
+  },
+  "helpText": {
+    "description": "Ajutor sau probleme?",
+    "message": "Ajutor sau probleme?"
+  },
+  "negativeText": {
+    "description": "Hopa! Ne cerem scuze pentru inconvenient, vă rugăm să ne <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">contactați-ne</a> <span aria-label=\"Chipul rânjit de sudoare\" role=\"img\">😅</span>",
+    "message": "Hopa! Ne cerem scuze pentru inconvenient, vă rugăm să ne <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">contactați-ne</a> <span aria-label=\"Chipul rânjit de sudoare\" role=\"img\">😅</span>"
+  },
+  "positiveText": {
+    "description": "Mulțumesc! Vă rugăm să evaluați extensia noastră <a id=\"store\" target=\"_blank\">aici</a> <span aria-label=\"Față zâmbitoare cu ochi în formă de inimă\" role=\"img\">😍</span>",
+    "message": "Mulțumesc! Vă rugăm să evaluați extensia noastră <a id=\"store\" target=\"_blank\">aici</a> <span aria-label=\"Față zâmbitoare cu ochi în formă de inimă\" role=\"img\">😍</span>"
+  },
+  "reviewText": {
+    "description": "Îți place această extensie?",
+    "message": "Îți place această extensie?"
+  },
+  "toggleText": {
+    "description": "Mâncând dialoguri în ",
+    "message": "Mâncând dialoguri în "
   }
 }

_locales/ru/messages.json

@@ -2,5 +2,33 @@
   "appDesc": {
     "description": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋",
     "message": "Кто-то сказал диалоги согласия на использование файлов cookie? 😋"
+  },
+  "contextMenuText": {
+    "description": "Сообщить о сайте...",
+    "message": "Сообщить о сайте..."
+  },
+  "footerText": {
+    "description": "Сделано с <span aria-label=\"любовью\" role=\"img\">❤️</span>",
+    "message": "Сделано с <span aria-label=\"любовью\" role=\"img\">❤️</span>"
+  },
+  "helpText": {
+    "description": "Помощь или проблемы?",
+    "message": "Помощь или проблемы?"
+  },
+  "negativeText": {
+    "description": "Ой! Приносим извинения за неудобства, пожалуйста, <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">свяжитесь с нами</a> <span aria-label=\"Улыбающееся лицо от пота\" role=\"img\">😅</span>",
+    "message": "Ой! Приносим извинения за неудобства, пожалуйста, <a href=\"mailto:wanhose.development@gmail.com\" target=\"_blank\">свяжитесь с нами</a> <span aria-label=\"Улыбающееся лицо от пота\" role=\"img\">😅</span>"
+  },
+  "positiveText": {
+    "description": "Спасибо! Пожалуйста, оцените наше расширение <a id=\"store\" target=\"_blank\">здесь</a> <span aria-label=\"Улыбающееся лицо с глазами-сердечками\" role=\"img\">😍</span>",
+    "message": "Спасибо! Пожалуйста, оцените наше расширение <a id=\"store\" target=\"_blank\">здесь</a> <span aria-label=\"Улыбающееся лицо с глазами-сердечками\" role=\"img\">😍</span>"
+  },
+  "reviewText": {
+    "description": "Вам нравится это расширение?",
+    "message": "Вам нравится это расширение?"
+  },
+  "toggleText": {
+    "description": "Есть диалоги в ",
+    "message": "Есть диалоги в "
   }
 }

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Cookie Dialog Monster",
-  "version": "5.3.3",
+  "version": "5.4.0",
   "default_locale": "en",
   "description": "__MSG_appDesc__",
   "icons": {

popup.html

@@ -11,7 +11,7 @@
     <header class="header">
       <h1 class="header-title">Cookie Dialog Monster</h1>
       <div class="header-actions">
-        <button id="reload">
+        <button aria-label="Reload page" id="reload">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="24"
@@ -34,7 +34,10 @@
     </header>
     <main>
       <label class="switch-label">
-        <span>Eating dialogs in <strong id="host"></strong></span>
+        <span>
+          <span data-i18n="toggleText"></span>
+          <strong id="host"></strong>
+        </span>
         <div class="switch">
           <input checked="checked" id="power" type="checkbox" />
           <span class="slider"></span>
@@ -43,9 +46,9 @@
       <div class="separator"></div>
       <div>
         <div class="rating">
-          <span>Do you like this extension?</span>
+          <span data-i18n="reviewText"></span>
           <div class="rating-actions">
-            <button id="unlike">
+            <button aria-label="Unlike" id="unlike">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
@@ -62,7 +65,7 @@
                 ></path>
               </svg>
             </button>
-            <button id="like">
+            <button aria-label="Like" id="like">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 width="24"
@@ -81,26 +84,12 @@
             </button>
           </div>
         </div>
-        <p hidden="true" id="negative">
+        <p data-i18n="negativeText" hidden="true" id="negative"></p>
-          Ooops! I am sorry for the inconvenience, please
+        <p data-i18n="positiveText" hidden="true" id="positive"></p>
-          <a href="mailto:wanhose.development@gmail.com" target="_blank">
-            contact me
-          </a>
-          and I will help you
-          <span aria-label="Grinning face with sweat" role="img">😅</span>
-        </p>
-        <p hidden="true" id="positive">
-          Thank you very much! Help me to grow rating and reviewing this
-          extension
-          <a id="store" target="_blank">here</a>
-          <span aria-label="Smiling face with heart-shaped eyes" role="img">
-            😍
-          </span>
-        </p>
       </div>
       <div class="separator"></div>
       <div class="help">
-        <span>Help or issues?</span>
+        <span data-i18n="helpText"></span>
         <a href="mailto:wanhose.development@gmail.com" target="_blank">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -120,7 +109,7 @@
       </div>
     </main>
     <footer>
-      Made with <span aria-label="Heart" role="img">❤️</span> by
+      <span data-i18n="footerText"></span>
       <a href="https://github.com/wanhose" target="_blank">wanhose</a>
     </footer>
   </body>

scripts/background.js

@@ -149,6 +149,30 @@ const getTab = (callback) => {
   });
 };
 
+/**
+ * @description Reports active tab URL
+ */
+
+const report = () => {
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    const tab = tabs[0];
+
+    if (tab) {
+      fetch("https://cdm-report-service.herokuapp.com/rest/v1/report/", {
+        body: JSON.stringify({
+          text: tab.url,
+          to: "wanhose.development@gmail.com",
+          subject: "Cookie Dialog Monster Report",
+        }),
+        headers: {
+          "Content-type": "application/json",
+        },
+        method: "POST",
+      });
+    }
+  });
+};
+
 /**
  * @description Update cache state
  * @param {string} [hostname]
@@ -159,6 +183,8 @@ const updateCache = (hostname, state) => {
   chrome.storage.local.get(null, (cache) => {
     const current = cache[hostname];
 
+    if (!state.enabled) report();
+
     chrome.storage.local.set({
       [hostname]: {
         enabled:
@@ -227,35 +253,14 @@ chrome.runtime.onMessage.addListener((request, sender, callback) => {
 chrome.contextMenus.create({
   contexts: ["all"],
   id: contextMenuId,
-  title: "Report site...",
+  title: chrome.i18n.getMessage("contextMenuText"),
 });
 
 /**
  * @description Listens to context menus
  */
 
-chrome.contextMenus.onClicked.addListener((info, tab) => {
+chrome.contextMenus.onClicked.addListener((info) => {
   if (info.menuItemId !== contextMenuId) return;
-
+  report();
-  fetch("https://cdm-report-service.herokuapp.com/rest/v1/report/", {
-    body: JSON.stringify({
-      text: tab.url,
-      to: "wanhose.development@gmail.com",
-      subject: "Cookie Dialog Monster Report",
-    }),
-    headers: {
-      "Content-type": "application/json",
-    },
-    method: "POST",
-  });
-});
-
-/**
- * @description Listens to updates
- */
-
-chrome.runtime.onInstalled.addListener(({ reason }) => {
-  if (reason === chrome.runtime.OnInstalledReason.UPDATE) {
-    chrome.storage.local.clear();
-  }
 });

scripts/content.js

@@ -43,15 +43,31 @@ let selectors = "";
 
 const target = document.body || document.documentElement;
 
+/**
+ * @description Checks if node element is removable
+ * @param {Element} node
+ */
+
+const check = (node) =>
+  node instanceof HTMLElement &&
+  node.parentElement &&
+  !["APP", "ROOT"].includes(node.id.toUpperCase()) &&
+  !["BODY", "HTML"].includes(node.tagName);
+
 /**
  * @description Cleans DOM
  */
 
 const clean = () => {
   if (selectors.length) {
-    const results = document.querySelectorAll(selectors);
+    const nodes = document.querySelectorAll(selectors);
 
-    for (let i = results.length; i--; ) results[i].outerHTML = "";
+    for (let i = nodes.length; i--; ) {
+      const node = nodes[i];
+      const valid = check(node);
+
+      if (valid) node.outerHTML = "";
+    }
   }
 };
 
@@ -71,10 +87,12 @@ const fix = () => {
   if (automobiel && body) {
     for (let i = body.childNodes.length; i--; ) {
       const node = body.childNodes[i];
-      if (node instanceof HTMLElement)
+
+      if (node instanceof HTMLElement) {
         node.style.setProperty("filter", "initial", "important");
       }
     }
+  }
 
   if (body) {
     if (classes.length) body.classList.remove(...classes);
@@ -88,7 +106,10 @@ const fix = () => {
 
   if (google) {
     const submit = google.querySelector("button");
-    if (submit) submit.click();
+
+    if (submit && submit instanceof HTMLElement) {
+      submit.click();
+    }
   }
 
   if (html) {
@@ -98,13 +119,19 @@ const fix = () => {
   }
 
   if (play) {
-    const element = document.querySelector("body > div");
+    const node = document.querySelector("body > div");
-    if (element) element.style.setProperty("z-index", "initial", "important");
+
+    if (node && node instanceof HTMLElement) {
+      node.style.setProperty("z-index", "initial", "important");
+    }
   }
 
   if (yahoo) {
     const submit = yahoo.querySelector('button[type="submit"]');
-    if (submit) submit.click();
+
+    if (submit && submit instanceof HTMLElement) {
+      submit.click();
+    }
   }
 };
 
@@ -118,14 +145,9 @@ const observer = new MutationObserver((mutations, instance) => {
 
       for (let j = mutation.addedNodes.length; j--; ) {
         const node = mutation.addedNodes[j];
-        const valid =
+        const valid = check(node);
-          node instanceof HTMLElement &&
-          node.parentElement &&
-          !["BODY", "HTML"].includes(node.tagName);
 
-        if (!valid) continue;
+        if (valid && node.matches(selectors)) node.outerHTML = "";
-
-        if (node.matches(selectors)) node.outerHTML = "";
       }
     }
   }
@@ -155,6 +177,7 @@ const setupSelectors = () =>
 
 /**
  * @description Listens DOM complete state
+ * @listens document#readystatechange
  */
 
 document.addEventListener("readystatechange", () => {

scripts/popup.js

@@ -94,8 +94,10 @@ const handleRate = (event) => {
  */
 
 const handleContentLoaded = () => {
-  dispatch({ type: "GET_TAB" }, null, ({ hostname, id }) => {
+  dispatch({ type: "GET_TAB" }, null, ({ hostname }) => {
     dispatch({ hostname, type: "GET_CACHE" }, null, ({ enabled }) => {
+      translate();
+
       const host = document.getElementById("host");
       const like = document.getElementById("like");
       const power = document.getElementById("power");
@@ -114,6 +116,21 @@ const handleContentLoaded = () => {
   });
 };
 
+/**
+ * @description Applies translations to tags with i18n data attribute
+ */
+
+const translate = () => {
+  const nodes = document.querySelectorAll("[data-i18n]");
+
+  for (let i = nodes.length; i--; ) {
+    const node = nodes[i];
+    const { i18n } = node.dataset;
+
+    node.innerHTML = chrome.i18n.getMessage(i18n);
+  }
+};
+
 /**
  * @description Listen to document ready
  * @listens document#ready