Merge pull request #105 from wanhose/v6.2.1

6.2.1

data/classes.txt

@@ -8,6 +8,7 @@ consent-modal-overflow
 cookies
 cu_k_cookie_consent_modal_open
 gcdc-locked
+gdpr-infobar-visible
 gdprbanner_consent_gdpr_consent
 gdprCookieBanner-acceptedAll
 hasCookieBanner

data/elements.txt

@@ -12668,4 +12668,6 @@ amp-consent
 .flatsome-cookies
 .popover-cover.zIndex--modal
 [style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999; background-color: rgba(0, 0, 0, 0.3);"]
-cmm-cookie-banner
+cmm-cookie-banner
+.td-menu-background
+[class*="sd-cmp-"]

packages/browser-extension/src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Cookie Dialog Monster",
-  "version": "6.2.0",
+  "version": "6.2.1",
   "default_locale": "en",
   "description": "__MSG_appDesc__",
   "icons": {
@@ -19,7 +19,7 @@
   },
   "content_scripts": [
     {
-      "css": ["styles/dialog.css"],
+      "all_frames": true,
       "exclude_matches": [
         "*://*.gfycat.com/*",
         "*://*.mediathekviewweb.de/*",
@@ -32,7 +32,7 @@
     }
   ],
   "host_permissions": ["http://*/*", "https://*/*"],
-  "permissions": ["contextMenus", "storage", "tabs"],
+  "permissions": ["contextMenus", "scripting", "storage", "tabs"],
   "web_accessible_resources": [
     {
       "matches": ["http://*/*", "https://*/*"],

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

@@ -19,6 +19,20 @@ const initial = { enabled: true };
 
 const reportMenuItemId = 'REPORT';
 
+/**
+ * @description A shortcut for chrome.scripting
+ * @type {chrome.storage.LocalStorageArea}
+ */
+
+const script = chrome.scripting;
+
+/**
+ * @description The storage to use
+ * @type {chrome.storage.LocalStorageArea}
+ */
+
+const storage = chrome.storage.local;
+
 /**
  * @description Refreshes data
  * @param {void?} callback
@@ -84,29 +98,29 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => {
       if (tabId) chrome.action.setPopup({ popup: '/popup.html', tabId });
       break;
     case 'GET_DATA':
-      chrome.storage.local.get('data', ({ data }) => {
+      storage.get('data', ({ data }) => (data ? callback(data) : refreshData(callback)));
-        if (data) callback(data);
+      return true;
-        else refreshData(callback);
-      });
-      break;
     case 'GET_STATE':
-      // prettier-ignore
+      if (hostname) storage.get(hostname, (state) => callback(state[hostname] ?? initial));
-      if (hostname) chrome.storage.local.get(hostname, (state) => callback(state[hostname] ?? initial));
+      return true;
-      break;
     case 'GET_TAB':
       chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => callback(tabs[0]));
+      return true;
+    case 'INSERT_CONTENT_CSS':
+      if (tabId) script.insertCSS({ files: ['styles/content.css'], target: { tabId } });
+      break;
+    case 'INSERT_DIALOG_CSS':
+      if (tabId) script.insertCSS({ files: ['styles/dialog.css'], target: { tabId } });
       break;
     case 'REPORT':
       if (tabId) report(message, sender.tab);
       break;
     case 'UPDATE_STATE':
-      if (hostname) chrome.storage.local.set({ [hostname]: message.state });
+      if (hostname) storage.set({ [hostname]: message.state });
       break;
     default:
       break;
   }
-
-  return true;
 });
 
 /**

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

@@ -78,6 +78,25 @@ const forceClean = () => {
   }
 };
 
+/**
+ * @description Checks if an element is visible in the viewport
+ * @param {HTMLElement} node
+ * @returns {boolean}
+ */
+
+const isInViewport = (node) => {
+  const bounding = node.getBoundingClientRect();
+
+  return (
+    bounding.top >= -node.offsetHeight &&
+    bounding.left >= -node.offsetWidth &&
+    bounding.right <=
+      (window.innerWidth || document.documentElement.clientWidth) + node.offsetWidth &&
+    bounding.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight) + node.offsetHeight
+  );
+};
+
 /**
  * @description Matches if node element is removable
  * @param {Element} node
@@ -86,19 +105,24 @@ const forceClean = () => {
  */
 
 const match = (node, skipMatch) => {
-  if (!(node instanceof HTMLElement)) return false;
+  if (node instanceof HTMLElement) {
+    const style = window.getComputedStyle(node);
+    const skipIsInViewport =
+      style.display === 'none' ||
+      style.height === '0px' ||
+      style.opacity === '0' ||
+      style.visibility === 'hidden';
 
-  const rect = node.getBoundingClientRect();
+    return (
-  const isFullscreen = rect.bottom + rect.top > 0 && rect.bottom - rect.top === 0;
+      !data?.tags.includes(node.tagName?.toUpperCase?.()) &&
-  const isVisible = rect.top <= (window.innerHeight || document.documentElement.clientHeight);
+      (skipIsInViewport || isInViewport(node)) &&
+      (!!node.offsetParent || style.position === 'fixed') &&
+      !!node.parentElement &&
+      (skipMatch || node.matches(data?.elements ?? []))
+    );
+  }
 
-  return (
+  return false;
-    !data?.tags.includes(node.tagName?.toUpperCase?.()) &&
-    (isFullscreen || isVisible) &&
-    (node.offsetParent || window.getComputedStyle(node).position === 'fixed') &&
-    node.parentElement &&
-    (skipMatch || node.matches(data?.elements ?? []))
-  );
 };
 
 /**
@@ -106,6 +130,12 @@ const match = (node, skipMatch) => {
  */
 
 const fix = () => {
+  const backdrop = document.getElementsByClassName('modal-backdrop')[0];
+
+  if (backdrop && backdrop.children.length === 0) {
+    backdrop.remove();
+  }
+
   document.getElementsByClassName('_31e')[0]?.classList.remove('_31e');
 
   if (data?.skips.length && !data.skips.includes(hostname)) {
@@ -189,7 +219,8 @@ window.addEventListener('pageshow', (event) => {
 
   if (state.enabled) {
     data = await dispatch({ hostname, type: 'GET_DATA' });
-    observer.observe(document.body ?? document.documentElement, options);
     dispatch({ type: 'ENABLE_ICON' });
+    dispatch({ type: 'INSERT_CONTENT_CSS' });
+    observer.observe(document.body ?? document.documentElement, options);
   }
 })();

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

@@ -182,6 +182,7 @@ const showReportDialog = () => {
     radio.addEventListener('click', radioClickHandler);
   }
 
+  dispatch({ type: 'INSERT_DIALOG_CSS' });
   document.body.appendChild(dialog);
   dialog.showModal();
 

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

@@ -0,0 +1,7 @@
+*,
+*:before,
+*:after {
+  animation: none !important;
+  /* transform: none !important; */
+  transition-property: none !important;
+}