From c4761c1c5c9b32f801ef8ce6a8855bcd2f271bff Mon Sep 17 00:00:00 2001 From: wanhose Date: Tue, 29 Nov 2022 20:41:58 +0100 Subject: [PATCH 1/6] feat(browser-extension): improve viewport visibility check --- .../browser-extension/src/scripts/content.js | 41 ++++++++++++------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/packages/browser-extension/src/scripts/content.js b/packages/browser-extension/src/scripts/content.js index fb4de5a..fd4688f 100644 --- a/packages/browser-extension/src/scripts/content.js +++ b/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 @@ -85,21 +104,13 @@ const forceClean = () => { * @returns {boolean} */ -const match = (node, skipMatch) => { - if (!(node instanceof HTMLElement)) return false; - - const rect = node.getBoundingClientRect(); - const isFullscreen = rect.bottom + rect.top > 0 && rect.bottom - rect.top === 0; - const isVisible = rect.top <= (window.innerHeight || document.documentElement.clientHeight); - - return ( - !data?.tags.includes(node.tagName?.toUpperCase?.()) && - (isFullscreen || isVisible) && - (node.offsetParent || window.getComputedStyle(node).position === 'fixed') && - node.parentElement && - (skipMatch || node.matches(data?.elements ?? [])) - ); -}; +const match = (node, skipMatch) => + node instanceof HTMLElement && + !data?.tags.includes(node.tagName?.toUpperCase?.()) && + isInViewport(node) && + (!!node.offsetParent || window.getComputedStyle(node).position === 'fixed') && + !!node.parentElement && + (skipMatch || node.matches(data?.elements ?? [])); /** * @description Fixes scroll issues From 0cb360f8f90842090b00fb3105db9ed770061b30 Mon Sep 17 00:00:00 2001 From: wanhose Date: Thu, 1 Dec 2022 16:46:32 +0100 Subject: [PATCH 2/6] feat(data): add new elements --- data/classes.txt | 1 + data/elements.txt | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/data/classes.txt b/data/classes.txt index 3e22e1c..1960eea 100644 --- a/data/classes.txt +++ b/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 diff --git a/data/elements.txt b/data/elements.txt index 35155b0..4eb94ea 100644 --- a/data/elements.txt +++ b/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 \ No newline at end of file +cmm-cookie-banner +.td-menu-background +[class*="sd-cmp-"] \ No newline at end of file From 28f656717d995158acc449c5a6c5f2eb250fdc52 Mon Sep 17 00:00:00 2001 From: wanhose Date: Thu, 1 Dec 2022 16:54:15 +0100 Subject: [PATCH 3/6] feat(browser-extension): add two new handlers to inject css avoiding to inject them always, also disable animations that are causing problems --- .../src/scripts/background.js | 30 ++++++++++++++----- .../browser-extension/src/scripts/content.js | 30 ++++++++++++++----- .../browser-extension/src/scripts/dialog.js | 1 + .../browser-extension/src/styles/content.css | 7 +++++ 4 files changed, 53 insertions(+), 15 deletions(-) create mode 100644 packages/browser-extension/src/styles/content.css diff --git a/packages/browser-extension/src/scripts/background.js b/packages/browser-extension/src/scripts/background.js index 4dc929a..8b5a8e4 100644 --- a/packages/browser-extension/src/scripts/background.js +++ b/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,23 +98,25 @@ 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 }) => { - if (data) callback(data); - else refreshData(callback); - }); + storage.get('data', ({ data }) => (data ? callback(data) : refreshData(callback))); break; case 'GET_STATE': - // prettier-ignore - if (hostname) chrome.storage.local.get(hostname, (state) => callback(state[hostname] ?? initial)); + if (hostname) storage.get(hostname, (state) => callback(state[hostname] ?? initial)); break; case 'GET_TAB': chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => callback(tabs[0])); break; + 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; diff --git a/packages/browser-extension/src/scripts/content.js b/packages/browser-extension/src/scripts/content.js index fd4688f..9627bea 100644 --- a/packages/browser-extension/src/scripts/content.js +++ b/packages/browser-extension/src/scripts/content.js @@ -104,13 +104,26 @@ const isInViewport = (node) => { * @returns {boolean} */ -const match = (node, skipMatch) => - node instanceof HTMLElement && - !data?.tags.includes(node.tagName?.toUpperCase?.()) && - isInViewport(node) && - (!!node.offsetParent || window.getComputedStyle(node).position === 'fixed') && - !!node.parentElement && - (skipMatch || node.matches(data?.elements ?? [])); +const match = (node, skipMatch) => { + if (node instanceof HTMLElement) { + const style = window.getComputedStyle(node); + const skipIsInViewport = + style.display === 'none' || + style.height === '0px' || + style.opacity === '0' || + style.visibility === 'hidden'; + + return ( + !data?.tags.includes(node.tagName?.toUpperCase?.()) && + (skipIsInViewport || isInViewport(node)) && + (!!node.offsetParent || style.position === 'fixed') && + !!node.parentElement && + (skipMatch || node.matches(data?.elements ?? [])) + ); + } + + return false; +}; /** * @description Fixes scroll issues @@ -200,7 +213,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); } })(); diff --git a/packages/browser-extension/src/scripts/dialog.js b/packages/browser-extension/src/scripts/dialog.js index 640ee8d..86a8c43 100644 --- a/packages/browser-extension/src/scripts/dialog.js +++ b/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(); diff --git a/packages/browser-extension/src/styles/content.css b/packages/browser-extension/src/styles/content.css new file mode 100644 index 0000000..c6820f6 --- /dev/null +++ b/packages/browser-extension/src/styles/content.css @@ -0,0 +1,7 @@ +*, +*:before, +*:after { + animation: none !important; + /* transform: none !important; */ + transition-property: none !important; +} From 96066a2cbd248140e37f47aab88c48582da9454b Mon Sep 17 00:00:00 2001 From: wanhose Date: Thu, 1 Dec 2022 16:54:37 +0100 Subject: [PATCH 4/6] chore(browser-extension): set all_frames to true and upgrade version --- packages/browser-extension/src/manifest.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/browser-extension/src/manifest.json b/packages/browser-extension/src/manifest.json index 272d9ac..0bd68c4 100644 --- a/packages/browser-extension/src/manifest.json +++ b/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://*/*"], From 01fbdf6f459010ee333a62022f3138576cc6fa18 Mon Sep 17 00:00:00 2001 From: wanhose Date: Thu, 1 Dec 2022 16:57:38 +0100 Subject: [PATCH 5/6] fix(browser-extension): console warning for sync handlers --- packages/browser-extension/src/scripts/background.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/browser-extension/src/scripts/background.js b/packages/browser-extension/src/scripts/background.js index 8b5a8e4..d24daef 100644 --- a/packages/browser-extension/src/scripts/background.js +++ b/packages/browser-extension/src/scripts/background.js @@ -99,13 +99,13 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => { break; case 'GET_DATA': storage.get('data', ({ data }) => (data ? callback(data) : refreshData(callback))); - break; + return true; case 'GET_STATE': if (hostname) storage.get(hostname, (state) => callback(state[hostname] ?? initial)); - break; + return true; case 'GET_TAB': chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => callback(tabs[0])); - break; + return true; case 'INSERT_CONTENT_CSS': if (tabId) script.insertCSS({ files: ['styles/content.css'], target: { tabId } }); break; @@ -121,8 +121,6 @@ chrome.runtime.onMessage.addListener((message, sender, callback) => { default: break; } - - return true; }); /** From 02f0c20014b0af598d202456a8a91c6d3194d2d1 Mon Sep 17 00:00:00 2001 From: wanhose Date: Thu, 1 Dec 2022 17:01:47 +0100 Subject: [PATCH 6/6] fix(browser-extension): empty bootstrap backdrops --- packages/browser-extension/src/scripts/content.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/browser-extension/src/scripts/content.js b/packages/browser-extension/src/scripts/content.js index 9627bea..bdeaffd 100644 --- a/packages/browser-extension/src/scripts/content.js +++ b/packages/browser-extension/src/scripts/content.js @@ -130,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)) {