Merge pull request #48 from wanhose/release_5.5.6

5.5.6

packages/browser-extension/src/_locales/de/messages.json

@@ -7,9 +7,9 @@
     "description": "Webseite melden...",
     "message": "Webseite melden..."
   },
-  "footerText": {
+  "contributeText": {
-    "description": "Mit <span aria-label=\"Liebe\" role=\"img\">❤️</span> gemacht von",
+    "description": "Tragen Sie zu diesem Projekt bei",
-    "message": "Mit <span aria-label=\"Liebe\" role=\"img\">❤️</span> gemacht von"
+    "message": "Tragen Sie zu diesem Projekt bei"
   },
   "helpText": {
     "description": "Hilfe oder Probleme?",
@@ -23,6 +23,10 @@
     "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>"
   },
+  "reportText": {
+    "description": "Bericht gesendet!",
+    "message": "Bericht gesendet!"
+  },
   "reviewText": {
     "description": "Gefällt dir diese Erweiterung?",
     "message": "Gefällt dir diese Erweiterung?"

packages/browser-extension/src/_locales/en/messages.json

@@ -7,9 +7,9 @@
     "description": "Report site...",
     "message": "Report site..."
   },
-  "footerText": {
+  "contributeText": {
-    "description": "Made with <span aria-label=\"Love\" role=\"img\">❤️</span> by",
+    "description": "Contribute to this project",
-    "message": "Made with <span aria-label=\"Love\" role=\"img\">❤️</span> by"
+    "message": "Contribute to this project"
   },
   "helpText": {
     "description": "Help or issues?",
@@ -23,6 +23,10 @@
     "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>"
   },
+  "reportText": {
+    "description": "Report sent!",
+    "message": "Report sent!"
+  },
   "reviewText": {
     "description": "Do you like this extension?",
     "message": "Do you like this extension?"

packages/browser-extension/src/_locales/es/messages.json

@@ -7,9 +7,9 @@
     "description": "Reportar sitio...",
     "message": "Reportar sitio..."
   },
-  "footerText": {
+  "contributeText": {
-    "description": "Hecho con <span aria-label=\"Amor\" role=\"img\">❤️</span> por",
+    "description": "Contribuye a este proyecto",
-    "message": "Hecho con <span aria-label=\"Amor\" role=\"img\">❤️</span> por"
+    "message": "Contribuye a este proyecto"
   },
   "helpText": {
     "description": "¿Ayuda o problemas?",
@@ -23,6 +23,10 @@
     "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>"
   },
+  "reportText": {
+    "description": "¡Reporte enviado!",
+    "message": "¡Reporte enviado!"
+  },
   "reviewText": {
     "description": "¿Te gusta esta extensión?",
     "message": "¿Te gusta esta extensión?"

packages/browser-extension/src/_locales/fr/messages.json

@@ -7,9 +7,9 @@
     "description": "Signaler le site...",
     "message": "Signaler le site..."
   },
-  "footerText": {
+  "contributeText": {
-    "description": "Fabriqué avec <span aria-label=\"Amour\" role=\"img\">❤️</span> par",
+    "description": "Contribuez à ce projet",
-    "message": "Fabriqué avec <span aria-label=\"Amour\" role=\"img\">❤️</span> par"
+    "message": "Contribuez à ce projet"
   },
   "helpText": {
     "description": "Aide ou problèmes?",
@@ -23,6 +23,10 @@
     "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>"
   },
+  "reportText": {
+    "description": "Rapport envoyé!",
+    "message": "Rapport envoyé!"
+  },
   "reviewText": {
     "description": "Aimez-vous cette extension?",
     "message": "Aimez-vous cette extension?"

packages/browser-extension/src/_locales/it/messages.json

@@ -7,9 +7,9 @@
     "description": "Segnala sito...",
     "message": "Segnala sito..."
   },
-  "footerText": {
+  "contributeText": {
-    "description": "Realizzato con <span aria-label=\"Amore\" role=\"img\">❤️</span> da",
+    "description": "Contribuisci a questo progetto",
-    "message": "Realizzato con <span aria-label=\"Amore\" role=\"img\">❤️</span> da"
+    "message": "Contribuisci a questo progetto"
   },
   "helpText": {
     "description": "Aiuto o problemi?",
@@ -23,6 +23,10 @@
     "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>"
   },
+  "reportText": {
+    "description": "Rapporto inviato!",
+    "message": "Rapporto inviato!"
+  },
   "reviewText": {
     "description": "Ti piace questa estensione?",
     "message": "Ti piace questa estensione?"

packages/browser-extension/src/_locales/pt_BR/messages.json

@@ -7,9 +7,9 @@
     "description": "Reportar site...",
     "message": "Reportar site..."
   },
-  "footerText": {
+  "contributeText": {
-    "description": "Feito com <span aria-label=\"Amor\" role=\"img\">❤️</span> por",
+    "description": "Contribua para este projeto",
-    "message": "Feito com <span aria-label=\"Amor\" role=\"img\">❤️</span> por"
+    "message": "Contribua para este projeto"
   },
   "helpText": {
     "description": "Ajuda ou problemas?",
@@ -23,6 +23,10 @@
     "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>"
   },
+  "reportText": {
+    "description": "Relatório enviado!",
+    "message": "Relatório enviado!"
+  },
   "reviewText": {
     "description": "Você gosta desta extensão?",
     "message": "Você gosta desta extensão?"

packages/browser-extension/src/_locales/pt_PT/messages.json

@@ -7,9 +7,9 @@
     "description": "Reportar site...",
     "message": "Reportar site..."
   },
-  "footerText": {
+  "contributeText": {
-    "description": "Feito com <span aria-label=\"Amor\" role=\"img\">❤️</span> por",
+    "description": "Contribua para este projeto",
-    "message": "Feito com <span aria-label=\"Amor\" role=\"img\">❤️</span> por"
+    "message": "Contribua para este projeto"
   },
   "helpText": {
     "description": "Ajuda ou problemas?",
@@ -23,6 +23,10 @@
     "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>"
   },
+  "reportText": {
+    "description": "Relatório enviado!",
+    "message": "Relatório enviado!"
+  },
   "reviewText": {
     "description": "Você gosta desta extensão?",
     "message": "Você gosta desta extensão?"

packages/browser-extension/src/_locales/ro/messages.json

@@ -7,9 +7,9 @@
     "description": "Raportați site-ul...",
     "message": "Raportați site-ul..."
   },
-  "footerText": {
+  "contributeText": {
-    "description": "Realizat cu <span aria-label=\"Dragoste\" role=\"img\">❤️</span> de",
+    "description": "Contribuie la acest proiect",
-    "message": "Realizat cu <span aria-label=\"Dragoste\" role=\"img\">❤️</span> de"
+    "message": "Contribuie la acest proiect"
   },
   "helpText": {
     "description": "Ajutor sau probleme?",
@@ -23,6 +23,10 @@
     "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>"
   },
+  "reportText": {
+    "description": "Raport trimis!",
+    "message": "Raport trimis!"
+  },
   "reviewText": {
     "description": "Îți place această extensie?",
     "message": "Îți place această extensie?"

packages/browser-extension/src/_locales/ru/messages.json

@@ -7,9 +7,9 @@
     "description": "Сообщить о сайте...",
     "message": "Сообщить о сайте..."
   },
-  "footerText": {
+  "contributeText": {
-    "description": "Сделано с <span aria-label=\"любовью\" role=\"img\">❤️</span>",
+    "description": "Внести свой вклад в этот проект",
-    "message": "Сделано с <span aria-label=\"любовью\" role=\"img\">❤️</span>"
+    "message": "Внести свой вклад в этот проект"
   },
   "helpText": {
     "description": "Помощь или проблемы?",
@@ -23,6 +23,10 @@
     "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>"
   },
+  "reportText": {
+    "description": "Отчет отправлен!",
+    "message": "Отчет отправлен!"
+  },
   "reviewText": {
     "description": "Вам нравится это расширение?",
     "message": "Вам нравится это расширение?"

packages/browser-extension/src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Cookie Dialog Monster",
-  "version": "5.5.5",
+  "version": "5.5.6",
   "default_locale": "en",
   "description": "__MSG_appDesc__",
   "icons": {
@@ -19,6 +19,7 @@
   },
   "content_scripts": [
     {
+      "css": ["styles/snackbar.css"],
       "exclude_matches": [
         "*://*.gfycat.com/*",
         "*://*.gmx.com/*",
@@ -26,7 +27,7 @@
         "*://*.rundschau-online.de/*",
         "*://*.youtube.com/embed/*"
       ],
-      "js": ["scripts/content.js"],
+      "js": ["scripts/content.js", "scripts/snackbar.js"],
       "matches": ["http://*/*", "https://*/*"],
       "run_at": "document_start"
     }

packages/browser-extension/src/popup.html

@@ -2,7 +2,7 @@
   <head>
     <link rel="stylesheet" href="/styles/fonts.css" />
     <link rel="stylesheet" href="/styles/reset.css" />
-    <link rel="stylesheet" href="/styles/globals.css" />
+    <link rel="stylesheet" href="/styles/popup.css" />
     <meta charset="UTF-8" />
     <meta name="author" content="wanhose" />
     <script src="/scripts/popup.js"></script>
@@ -84,6 +84,27 @@
         <p data-i18n="negativeText" hidden="true" id="negative"></p>
         <p data-i18n="positiveText" hidden="true" id="positive"></p>
       </div>
+      <div class="contribute">
+        <span data-i18n="contributeText"></span>
+        <a href="https://www.github.com/wanhose/cookie-dialog-monster" target="_blank">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="18" cy="18" r="3"></circle>
+            <circle cx="6" cy="6" r="3"></circle>
+            <path d="M13 6h3a2 2 0 0 1 2 2v7"></path>
+            <line x1="6" y1="9" x2="6" y2="21"></line>
+          </svg>
+        </a>
+      </div>
       <div class="help">
         <span data-i18n="helpText"></span>
         <a href="mailto:hello@wanhose.dev" target="_blank">
@@ -104,10 +125,6 @@
         </a>
       </div>
     </main>
-    <footer>
+    <footer></footer>
-      <hr />
-      <span data-i18n="footerText"></span>
-      <a href="https://github.com/wanhose" target="_blank">wanhose</a>
-    </footer>
   </body>
 </html>

packages/browser-extension/src/scripts/background.js

@@ -3,230 +3,120 @@
  * @type {string}
  */
 
-const apiUrl = 'https://api.cookie-dialog-monster.com/rest/v1';
+const apiUrl = 'https://api.cookie-dialog-monster.com/rest/v2';
 
 /**
- * @description Base data URL
+ * @description Initial state
- * @type {string}
- */
-
-const baseDataUrl = 'https://raw.githubusercontent.com/wanhose/cookie-dialog-monster/main/data';
-
-/**
- * @description Cache data
- * @type {{ attributes: string[], classes: string[], fixes: string[], selectors: string[], skips: string[] }}
- */
-
-let cache = undefined;
-
-/**
- * @description Context menu identifier
- * @type {string}
- */
-
-const contextMenuId = 'CDM_MENU';
-
-/**
- * @description Cache initial state
  * @type {{ enabled: boolean }}
  */
 
 const initial = { enabled: true };
 
 /**
- * @description Disables icon
+ * @description Context menu identifier
- * @param {string} tabId
+ * @type {string}
  */
 
-const disableIcon = (tabId) =>
+const reportMenuItemId = 'REPORT';
-  chrome.browserAction.setIcon({ path: 'assets/icons/disabled.png', tabId });
 
 /**
- * @description Enables icon
+ * @description Refreshes data
- * @param {string} tabId
+ * @param {void?} callback
  */
 
-const enableIcon = (tabId) =>
+const refreshData = (callback) => {
-  chrome.browserAction.setIcon({ path: 'assets/icons/enabled.png', tabId });
+  fetch(`${apiUrl}/data/`).then((result) => {
-
+    result.json().then(({ data }) => {
-/**
+      chrome.storage.local.set({ data });
- * @description Enables popup
+      callback(data);
- * @param {string} tabId
- */
-
-const enablePopup = (tabId) => chrome.browserAction.setPopup({ popup: 'popup.html', tabId });
-
-/**
- * @description Retrieves store
- * @param {string} hostname
- * @param {void} callback
- * @returns {{ enabled: boolean }}
- */
-
-const getStore = (hostname, callback) => {
-  chrome.storage.local.get(null, (store) => {
-    callback(store[hostname] ?? initial);
-  });
-};
-
-/**
- * @async
- * @description Get all data from GitHub
- * @param {void} callback
- * @returns {Promise<{ attributes: string[], classes: string[], fixes: string[], selectors: string[], skips: string[] }>}
- */
-
-const getData = async (callback) => {
-  if (cache) {
-    callback(cache);
-    return;
-  }
-
-  const data = await Promise.all([
-    query('classes'),
-    query('elements'),
-    query('fixes'),
-    query('skips'),
-  ]);
-
-  const result = {
-    attributes: [
-      ...new Set(
-        data[1].elements.flatMap((element) => {
-          const attributes = element.match(/(?<=\[)[^(){}[\]]+(?=\])/g);
-
-          return attributes?.length
-            ? [
-                ...attributes.flatMap((attribute) => {
-                  return attribute ? [attribute.replace(/\".*\"|(=|\^|\*|\$)/g, '')] : [];
-                }),
-              ]
-            : [];
-        })
-      ),
-    ],
-    classes: data[0].classes,
-    fixes: data[2].fixes,
-    selectors: data[1].elements,
-    skips: data[3].skips,
-  };
-
-  if (Object.keys(result).every((key) => result[key].length > 0)) cache = result;
-  callback(result);
-};
-
-/**
- * @description Retrieves current tab information
- * @param {void} [callback]
- * @returns {Promise<{ id: string, location: string }>}
- */
-
-const getTab = (callback) => {
-  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-    const tab = tabs[0];
-
-    callback({
-      id: tab?.id,
-      hostname: tab ? new URL(tab.url).hostname.split('.').slice(-2).join('.') : undefined,
     });
   });
 };
 
 /**
  * @async
- * @description Retrieves data from GitHub
- * @param {string} key
- * @returns {Promise<{ [key]: string[] }>}
- */
-
-const query = async (key) => {
-  try {
-    const url = `${baseDataUrl}/${key}.txt`;
-    const response = await fetch(url);
-    const data = await response.text();
-
-    if (response.status !== 200) throw new Error();
-
-    return { [key]: [...new Set(data.split('\n'))] };
-  } catch {
-    return { [key]: [] };
-  }
-};
-
-/**
  * @description Reports active tab URL
+ * @param {chrome.tabs.Tab} tab
  */
 
-const report = () => {
+const report = async (tab) => {
-  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+  const version = chrome.runtime.getManifest().version;
-    const tab = tabs[0];
+  const body = JSON.stringify({ url: tab?.url, version });
-    const userAgent = window.navigator.userAgent;
+  const headers = { 'Content-type': 'application/json' };
-    const version = chrome.runtime.getManifest().version;
+  const url = `${apiUrl}/report/`;
 
-    if (tab) {
+  await fetch(url, { body, headers, method: 'POST' });
-      fetch(`${apiUrl}/report/`, {
+  chrome.tabs.sendMessage(tab.id, { type: 'SHOW_REPORT_CONFIRMATION' });
-        body: JSON.stringify({
-          html: `<b>Browser:</b> ${userAgent}<br/><b>Site:</b> ${tab.url}<br/><b>Version:</b> ${version}`,
-          to: 'hello@wanhose.dev',
-          subject: 'Cookie Dialog Monster Report',
-        }),
-        headers: {
-          'Content-type': 'application/json',
-        },
-        method: 'POST',
-      });
-    }
-  });
 };
 
 /**
- * @description Update store
+ * @description Listens to context menus
- * @param {string} [hostname]
- * @param {object} [state]
  */
 
-const updateStore = (hostname, state) => {
+chrome.contextMenus.onClicked.addListener((info, tab) => {
-  chrome.storage.local.get(null, (cache) => {
+  switch (info.menuItemId) {
-    const current = cache[hostname];
+    case reportMenuItemId:
+      if (tab) report(tab);
+      break;
+    default:
+      break;
+  }
+});
 
-    chrome.storage.local.set({
+/**
-      [hostname]: {
+ * @description Listens to extension installed/updated
-        enabled: typeof state.enabled === 'undefined' ? current.enabled : state.enabled,
+ */
-      },
+
-    });
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.contextMenus.create({
+    contexts: ['all'],
+    documentUrlPatterns: chrome.runtime.getManifest().content_scripts[0].matches,
+    id: reportMenuItemId,
+    title: chrome.i18n.getMessage('contextMenuText'),
   });
-};
+});
+
+/**
+ * @description Listens to first start
+ */
+
+chrome.runtime.onStartup.addListener(() => {
+  refreshData();
+});
 
 /**
  * @description Listens to messages
  */
 
-chrome.runtime.onMessage.addListener((request, sender, callback) => {
+chrome.runtime.onMessage.addListener((message, sender, callback) => {
-  const hostname = request.hostname;
+  const hostname = message.hostname;
-  const state = request.state;
   const tabId = sender.tab?.id;
 
-  switch (request.type) {
+  switch (message.type) {
     case 'DISABLE_ICON':
-      if (tabId) disableIcon(tabId);
+      if (tabId) chrome.browserAction.setIcon({ path: 'assets/icons/disabled.png', tabId });
       break;
     case 'ENABLE_ICON':
-      if (tabId) enableIcon(tabId);
+      if (tabId) chrome.browserAction.setIcon({ path: 'assets/icons/enabled.png', tabId });
       break;
     case 'ENABLE_POPUP':
-      if (tabId) enablePopup(tabId);
+      if (tabId) chrome.browserAction.setPopup({ popup: 'popup.html', tabId });
       break;
     case 'GET_DATA':
-      getData(callback);
+      chrome.storage.local.get('data', ({ data }) => {
+        if (data) callback(data);
+        else refreshData(callback);
+      });
       break;
-    case 'GET_STORE':
+    case 'GET_STATE':
-      getStore(hostname, callback);
+      // prettier-ignore
+      if (hostname) chrome.storage.local.get(hostname, (state) => callback(state[hostname] ?? initial));
       break;
     case 'GET_TAB':
-      getTab(callback);
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => callback(tabs[0]));
       break;
-    case 'UPDATE_STORE':
+    case 'UPDATE_STATE':
-      updateStore(hostname, state);
+      if (hostname) chrome.storage.local.set({ [hostname]: message.state });
       break;
     default:
       break;
@@ -234,23 +124,3 @@ chrome.runtime.onMessage.addListener((request, sender, callback) => {
 
   return true;
 });
-
-/**
- * @description Creates context menu
- */
-
-chrome.contextMenus.create({
-  contexts: ['all'],
-  documentUrlPatterns: chrome.runtime.getManifest().content_scripts[0].matches,
-  id: contextMenuId,
-  title: chrome.i18n.getMessage('contextMenuText'),
-});
-
-/**
- * @description Listens to context menus
- */
-
-chrome.contextMenus.onClicked.addListener((info) => {
-  if (info.menuItemId !== contextMenuId) return;
-  report();
-});

packages/browser-extension/src/scripts/content.js

@@ -1,36 +1,28 @@
 /**
- * @description Array of selectors
+ * @description Data properties
- * @type {string[]}
+ * @type {{ classes: string[], fixes: string[], elements: string[], skips: string[] }?}
  */
 
-const classes = [];
+let data = null;
 
 /**
  * @description Shortcut to send messages to background script
- * @type {void}
  */
 
 const dispatch = chrome.runtime.sendMessage;
 
 /**
- * @description Array of skips to skip
+ * @description Forbidden tags to ignore in the DOM
- * @type {string[]}
  */
 
-const skips = [];
+const forbiddenTags = ['BASE', 'BODY', 'HEAD', 'HTML', 'LINK', 'META', 'SCRIPT', 'STYLE', 'TITLE'];
 
 /**
- * @description Array of instructions
+ * @description Current hostname
- * @type {string[]}
+ * @type {string}
  */
 
-const fixes = [];
+const hostname = document.location.hostname.split('.').slice(-3).join('.').replace('www.', '');
-
-/**
- * @description Hostname
- */
-
-const hostname = document.location.hostname.split('.').slice(-2).join('.');
 
 /**
  * @description Options provided to observer
@@ -46,56 +38,43 @@ const options = { childList: true, subtree: true };
 const preview = hostname.startsWith('consent.') || hostname.startsWith('myprivacy.');
 
 /**
- * @description Selectors list
+ * @description Matches if node element is removable
- * @type {string[]}
+ * @param {Element} node
- */
-
-const selectors = [];
-
-/**
- * @description Target provided to observer
- */
-
-const target = document.body || document.documentElement;
-
-/**
- * @description Checks if node element is removable
- * @param {any} node
- * @param {boolean} skipMatch
  * @returns {boolean}
  */
 
-const check = (node, skipMatch) =>
+const match = (node) =>
   node instanceof HTMLElement &&
   node.parentElement &&
-  !['BODY', 'HTML'].includes(node.tagName) &&
+  !forbiddenTags.includes(node.tagName?.toUpperCase?.()) &&
-  !(node.id && ['APP', 'ROOT'].includes(node.id.toUpperCase?.())) &&
+  node.matches(data?.elements ?? []);
-  (skipMatch || node.matches(selectors));
 
 /**
  * @description Cleans DOM
  * @param {HTMLElement[]} nodes
- * @param {boolean} skipMatch
+ * @param {boolean?} skipMatch
  * @returns {void}
  */
 
 const clean = (nodes, skipMatch) =>
-  nodes.filter((node) => check(node, skipMatch)).forEach((node) => (node.outerHTML = ''));
+  nodes.filter((node) => skipMatch || match(node)).forEach((node) => node.remove());
 
 /**
  * @description Fixes scroll issues
  */
 
 const fix = () => {
-  if (skips.length && !skips.includes(hostname)) {
+  document.getElementsByClassName('_31e')[0]?.classList.remove('_31e');
+
+  if (data?.skips.length && !data.skips.includes(hostname)) {
     for (const item of [document.body, document.documentElement]) {
-      item?.classList.remove(...classes);
+      item?.classList.remove(...(data?.classes ?? []));
       item?.style.setProperty('position', 'initial', 'important');
       item?.style.setProperty('overflow-y', 'initial', 'important');
     }
   }
 
-  for (const fix of fixes) {
+  for (const fix of data?.fixes ?? []) {
     const [match, selector, action, property] = fix.split('##');
 
     if (hostname.includes(match)) {
@@ -132,54 +111,40 @@ const fix = () => {
  * @type {MutationObserver}
  */
 
-const observer = new MutationObserver((mutations, instance) => {
+const observer = new MutationObserver((mutations) => {
   const nodes = mutations.map((mutation) => Array.from(mutation.addedNodes)).flat();
 
-  instance.disconnect();
   fix();
-  if (!preview && selectors.length) clean(nodes);
+  if (data?.elements.length && !preview) clean(nodes);
-  instance.observe(target, options);
 });
 
 /**
- * @description Cleans DOM again after all
+ * @description Fixes bfcache issues
- * @listens document#readystatechange
+ * @listens window#pageshow
  */
 
-document.addEventListener('readystatechange', () => {
+window.addEventListener('pageshow', (event) => {
-  dispatch({ hostname, type: 'GET_STORE' }, null, async ({ enabled }) => {
+  if (event.persisted) {
-    if (document.readyState === 'complete' && enabled && !preview) {
+    dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
-      const nodes = selectors.length ? Array.from(document.querySelectorAll(selectors)) : [];
+      if (data?.elements.length && state?.enabled && !preview) {
-
+        fix();
-      fix();
+        clean(Array.from(document.querySelectorAll(data.elements)), true);
-      clean(nodes, true);
+      }
-      setTimeout(() => clean(nodes, true), 2000);
+    });
-    }
+  }
-  });
 });
 
 /**
- * @description Fix bfcache issues
+ * @description Sets up everything
- * @listens window#unload
  */
 
-window.addEventListener('unload', () => {});
+dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
-
-/**
- * @description Setups everything and starts to observe if enabled
- */
-
-dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => {
   dispatch({ type: 'ENABLE_POPUP' });
 
-  if (enabled) {
+  if (state?.enabled) {
-    dispatch({ type: 'GET_DATA' }, null, (data) => {
+    dispatch({ hostname, type: 'GET_DATA' }, null, (result) => {
-      classes.push(...data.classes);
+      data = result;
-      fixes.push(...data.fixes);
+      observer.observe(document.body ?? document.documentElement, options);
-      options.attributeFilter = data.attributes;
-      selectors.push(...data.selectors);
-      skips.push(...data.skips);
-      observer.observe(target, options);
       dispatch({ type: 'ENABLE_ICON' });
     });
   }

packages/browser-extension/src/scripts/popup.js

@@ -1,5 +1,4 @@
 /**
- * @constant chromeUrl
  * @description Chrome Web Store link
  * @type {string}
  */
@@ -7,15 +6,12 @@
 const chromeUrl = 'https://chrome.google.com/webstore/detail/djcbfpkdhdkaflcigibkbpboflaplabg';
 
 /**
- * @constant dispatch
  * @description Shortcut to send messages to background script
- * @type {void}
  */
 
 const dispatch = chrome.runtime.sendMessage;
 
 /**
- * @constant edgeUrl
  * @description Edge Add-ons link
  * @type {string}
  */
@@ -24,7 +20,6 @@ const edgeUrl =
   'https://microsoftedge.microsoft.com/addons/detail/hbogodfciblakeneadpcolhmfckmjcii';
 
 /**
- * @constant firefoxUrl
  * @description Firefox Add-ons link
  * @type {string}
  */
@@ -32,7 +27,13 @@ const edgeUrl =
 const firefoxUrl = 'https://addons.mozilla.org/es/firefox/addon/cookie-dialog-monster/';
 
 /**
- * @constant isChromium
+ * @description Current hostname
+ * @type {string}
+ */
+
+let hostname = '?';
+
+/**
  * @description Is current browser an instance of Chromium?
  * @type {boolean}
  */
@@ -40,7 +41,6 @@ const firefoxUrl = 'https://addons.mozilla.org/es/firefox/addon/cookie-dialog-mo
 const isChromium = navigator.userAgent.indexOf('Chrome') !== -1;
 
 /**
- * @constant isEdge
  * @description Is current browser an instance of Edge?
  * @type {boolean}
  */
@@ -48,7 +48,6 @@ const isChromium = navigator.userAgent.indexOf('Chrome') !== -1;
 const isEdge = navigator.userAgent.indexOf('Edg') !== -1;
 
 /**
- * @constant isFirefox
  * @description Is current browser an instance of Firefox?
  * @type {boolean}
  */
@@ -59,22 +58,10 @@ const isFirefox = navigator.userAgent.indexOf('Firefox') !== -1;
  * @description Disables or enables extension on current page
  */
 
-const handlePowerChange = () => {
+const handlePowerChange = async () => {
-  dispatch({ type: 'GET_TAB' }, null, ({ hostname, id }) => {
+  dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
-    dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => {
+    dispatch({ hostname, state: { enabled: !state?.enabled }, type: 'UPDATE_STATE' });
-      dispatch({ hostname, state: { enabled: !enabled }, type: 'UPDATE_STORE' });
+    chrome.tabs.reload({ bypassCache: true });
-      chrome.tabs.reload(id, { bypassCache: true });
-    });
-  });
-};
-
-/**
- * @description Reload current page
- */
-
-const handleReload = () => {
-  dispatch({ type: 'GET_TAB' }, null, ({ id }) => {
-    chrome.tabs.reload(id, { bypassCache: true });
   });
 };
 
@@ -106,8 +93,12 @@ const handleRate = (event) => {
  */
 
 const handleContentLoaded = () => {
-  dispatch({ type: 'GET_TAB' }, null, ({ hostname }) => {
+  dispatch({ type: 'GET_TAB' }, null, (tab) => {
-    dispatch({ hostname, type: 'GET_STORE' }, null, ({ enabled }) => {
+    hostname = tab?.url
+      ? new URL(tab.url).hostname.split('.').slice(-3).join('.').replace('www.', '')
+      : undefined;
+
+    dispatch({ hostname, type: 'GET_STATE' }, null, (state) => {
       translate();
 
       const host = document.getElementById('host');
@@ -119,13 +110,14 @@ const handleContentLoaded = () => {
 
       like.addEventListener('click', handleRate);
       power.addEventListener('change', handlePowerChange);
-      reload.addEventListener('click', handleReload);
+      reload.addEventListener('click', () => chrome.tabs.reload({ bypassCache: true }));
-      if (isEdge) store.setAttribute('href', edgeUrl);
-      else if (isChromium) store.setAttribute('href', chromeUrl);
-      else if (isFirefox) store.setAttribute('href', firefoxUrl);
       unlike.addEventListener('click', handleRate);
-      if (location) host.innerText = hostname.replace('www.', '');
+
-      if (!enabled) power.removeAttribute('checked');
+      host.innerText = hostname ?? 'unknown';
+      if (isEdge) store?.setAttribute('href', edgeUrl);
+      else if (isChromium) store?.setAttribute('href', chromeUrl);
+      else if (isFirefox) store?.setAttribute('href', firefoxUrl);
+      if (!state.enabled) power.removeAttribute('checked');
     });
   });
 };

packages/browser-extension/src/scripts/snackbar.js

@@ -0,0 +1,97 @@
+/**
+ * @description Listens to messages
+ */
+
+chrome.runtime.onMessage.addListener((message) => {
+  switch (message.type) {
+    case 'HIDE_REPORT_CONFIRMATION':
+      hideReportConfirmation();
+      break;
+    case 'SHOW_REPORT_CONFIRMATION':
+      showReportConfirmation();
+      break;
+    default:
+      break;
+  }
+});
+
+/**
+ * @description Report confirmation ID
+ */
+
+const REPORT_CONFIRMATION_ID = 'report-confirmation';
+
+/**
+ * @description Report confirmation outer HTML
+ */
+
+const REPORT_CONFIRMATION_HTML = `
+      <div id="${REPORT_CONFIRMATION_ID}">
+        <div id="report-confirmation-bar"></div>
+        <div id="report-confirmation-content">
+          <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="32" width="32">
+              <path
+                fill="#3dd9eb"
+                d="M45,22.5C45,32,36,41,24,41S3,33,3,22.5C3,14.492,14.059,12,24,12S45,14.492,45,22.5z"
+              />
+              <circle cx="17.5" cy="13.5" r="9.5" fill="#3dd9eb" />
+              <circle cx="30.5" cy="13.5" r="9.5" fill="#3dd9eb" />
+              <circle cx="17.5" cy="13.5" r="6.5" fill="#fff" />
+              <circle cx="30.5" cy="13.5" r="6.5" fill="#fff" />
+              <circle cx="18" cy="15" r="2" fill="#34495e" />
+              <circle cx="29" cy="13" r="2" fill="#34495e" />
+              <path
+                fill="#3dd9eb"
+                d="M8.118,15.007c0,0-1.91-1.046-4.118-0.007l1.5,1.817c0,0-3.994,1.404-5.486,4.525l3.16-0.632 c0,0-2.149,1.315-2.174,5.284l2.098-1.466c0,0-2.402,3.514-0.126,7.483l1.138-3.362c0,0-0.126,4.475,1.871,7.306l0.657-2.831 c0,0,0.413,3.84,3.413,5.84l-0.303-2.629c0,0,1.702,2.25,4.197,4.542l0.034-1.989L17.011,40L19,33.09L8.118,15.007z"
+              />
+              <path
+                fill="#3dd9eb"
+                d="M39.906,15.007c0,0,1.91-1.046,4.118-0.007l-1.5,1.817c0,0,3.994,1.404,5.486,4.525l-3.16-0.632 c0,0,2.149,1.315,2.174,5.284l-2.098-1.466c0,0,2.402,3.514,0.126,7.483l-1.138-3.362c0,0,0.126,4.475-1.871,7.306l-0.657-2.831 c0,0-0.413,3.84-3.413,5.84l0.303-2.629c0,0-1.702,2.25-4.197,4.542l-0.034-1.989L31.013,40l-1.989-6.91L39.906,15.007z"
+              />
+              <path
+                fill="#34495e"
+                d="M24,28.5c-5.661,0-12.909-1.736-15.24-4.643l2.34-1.877c1.478,1.842,7.626,3.52,12.9,3.52 c5.231,0,11.363-1.657,12.865-3.477l2.313,1.909C36.819,26.792,29.608,28.5,24,28.5z"
+              />
+              <path
+                fill="#34495e"
+                d="M36,25.5C36,31.851,30.075,36,24,36s-12-4.149-12-10.5c0-0.25,6.5,1.5,12,1.5S36,25.25,36,25.5z"
+              />
+              <path
+                fill="#3dd9eb"
+                d="M13.978,38.888C13.978,38.888,18,42,20,42l-2-3L13.978,38.888z"
+              />
+              <path fill="#3dd9eb" d="M34,38.888c0,0-4.022,3.112-6.022,3.112l2-3L34,38.888z" />
+              <polygon fill="#3dd9eb" points="19.034,40.472 24,43 29.011,40.404" />
+          </svg>
+          <span>${chrome.i18n.getMessage('reportText')}</span>
+        </div>
+      </div>
+    `;
+
+/**
+ * @description Hides report confirmation
+ */
+
+const hideReportConfirmation = () => {
+  document.getElementById(REPORT_CONFIRMATION_ID)?.setAttribute('hidden', 'true');
+};
+
+/**
+ * @description Shows report confirmation
+ */
+
+const showReportConfirmation = () => {
+  const element = document.getElementById(REPORT_CONFIRMATION_ID);
+
+  if (element) {
+    element.removeAttribute('hidden');
+  } else {
+    const parser = new DOMParser();
+    const result = parser.parseFromString(REPORT_CONFIRMATION_HTML, 'text/html');
+    const snackbar = result.body.firstElementChild;
+
+    document.body.appendChild(snackbar);
+  }
+
+  setTimeout(() => hideReportConfirmation(), 3750);
+};

packages/browser-extension/src/styles/popup.css

@@ -25,7 +25,7 @@ body {
   display: flex;
   flex-direction: column;
   font-family: 'Lato', Arial, Helvetica, sans-serif;
-  height: 25rem;
+  height: 24rem;
   width: 20rem;
 }
 
@@ -34,9 +34,10 @@ button {
 }
 
 footer {
+  background-color: var(--color-secondary);
   font-size: 0.75rem;
+  height: 0.25rem;
   margin-top: auto;
-  padding: 1rem;
   text-align: center;
 }
 
@@ -109,18 +110,23 @@ svg {
   font-size: 1rem;
 }
 
+.contribute,
 .help {
   align-items: center;
   display: flex;
+  font-size: 0.875rem;
   justify-content: space-between;
 }
 
+.contribute > a,
 .help > a {
   color: var(--color-secondary);
   padding: 0.25rem;
   transition: 0.4s;
 }
 
+.contribute > a:focus,
+.contribute > a:hover,
 .help > a:focus,
 .help > a:hover {
   background-color: var(--color-secondary);
@@ -129,18 +135,11 @@ svg {
   outline: none;
 }
 
-.help > span {
-  font-size: 0.875rem;
-}
-
 .rating {
   align-items: center;
   display: flex;
-  justify-content: space-between;
-}
-
-.rating > span {
   font-size: 0.875rem;
+  justify-content: space-between;
 }
 
 .rating-actions {

packages/browser-extension/src/styles/snackbar.css

@@ -0,0 +1,65 @@
+#report-confirmation {
+  bottom: 30px;
+  font-family: 'Lato', Arial, Helvetica, sans-serif !important;
+  min-width: 250px;
+  position: fixed;
+  right: 10px;
+  text-align: left;
+  visibility: hidden;
+  z-index: 99999;
+}
+
+#report-confirmation:not([hidden]) {
+  animation: fadeIn 0.5s, fadeOut 0.5s 3.5s;
+  visibility: visible !important;
+}
+
+#report-confirmation:not([hidden]) #report-confirmation-bar {
+  animation: roundTime 3.5s linear forwards;
+}
+
+#report-confirmation-content {
+  align-items: center;
+  background-color: #34495e !important;
+  border-radius: 2px;
+  color: #fff !important;
+  display: flex;
+  font-size: 14px !important;
+  gap: 16px;
+  overflow: hidden;
+  padding: 16px;
+}
+
+#report-confirmation-bar {
+  background-color: #3dd9eb !important;
+  height: 4px;
+  transform-origin: left center;
+}
+
+@keyframes fadeIn {
+  from {
+    bottom: 0;
+    opacity: 0;
+  }
+  to {
+    bottom: 30px;
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    bottom: 30px;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes roundTime {
+  to {
+    transform: scaleX(0);
+  }
+}