From 9a12e46796dc3f44abb1b4da3ccf1cef5e6e0c82 Mon Sep 17 00:00:00 2001 From: wanhose Date: Sat, 10 Aug 2024 15:42:08 +0200 Subject: [PATCH] feat(browser-extension): move backdrops to database and improve code/documentation --- database.json | 1 + .../browser-extension/src/scripts/content.js | 90 +++++++++---------- 2 files changed, 46 insertions(+), 45 deletions(-) diff --git a/database.json b/database.json index c066b39..0024b0e 100644 --- a/database.json +++ b/database.json @@ -834,6 +834,7 @@ ] }, "tokens": { + "backdrops": [".modal-backdrop", ".offcanvas-backdrop", ".overlay"], "classes": [ "appconsent_noscroll", "b-modal-banner--disabled", diff --git a/packages/browser-extension/src/scripts/content.js b/packages/browser-extension/src/scripts/content.js index 5e60129..8d30d99 100644 --- a/packages/browser-extension/src/scripts/content.js +++ b/packages/browser-extension/src/scripts/content.js @@ -1,28 +1,28 @@ /** * @typedef {Object} ExtensionData - * @property {string[] | undefined} commonWords - * @property {Fix[] | undefined} fixes - * @property {{ domains: string[] | undefined, tags: string[] | undefined } | undefined} skips - * @property {{ classes: string[] | undefined, selectors: string[] | undefined } | undefined} tokens + * @property {string[]} commonWords + * @property {Fix[]} fixes + * @property {{ domains: string[], tags: string[] }} skips + * @property {{ backdrops: string[], classes: string[], selectors: string[] }} tokens */ /** * @typedef {Object} Fix * @property {string} action * @property {string} domain - * @property {string | undefined} property + * @property {string} [property] * @property {string} selector */ /** * @typedef {Object} RunParams - * @property {HTMLElement[] | undefined} elements - * @property {boolean | undefined} skipMatch + * @property {HTMLElement[]} [elements] + * @property {boolean} [skipMatch] */ /** * @typedef {Object} SetUpParams - * @property {boolean | undefined} skipRunFn + * @property {boolean} [skipRunFn] */ if (typeof browser === 'undefined') { @@ -39,7 +39,19 @@ let count = 0; * @description Data properties * @type {ExtensionData} */ -let { commonWords, fixes = [], skips, tokens } = {}; +let { commonWords, fixes, skips, tokens } = { + commonWords: [], + fixes: [], + skips: { + domains: [], + tags: [], + }, + tokens: { + backdrops: [], + classes: [], + selectors: [], + }, +}; /** * @description Attribute name @@ -98,7 +110,7 @@ let state = { enabled: true }; /** * @description Clean DOM * @param {Element[]} elements - * @param {boolean?} skipMatch + * @param {boolean} [skipMatch] * @returns {void} */ function clean(elements, skipMatch) { @@ -156,7 +168,7 @@ function containsCommonWord(element) { */ function forceClean(element) { const nodes = [...element.querySelectorAll(tokens.selectors)]; - const elements = nodes.flatMap((node) => filterMapEarly(node)); + const elements = nodes.flatMap((node) => filterNodeEarly(node)); if (elements.length) { fix(); @@ -220,16 +232,11 @@ function isInViewport(element) { /** * @description Check if element element is removable * @param {Element} element - * @param {boolean?} skipMatch + * @param {boolean} [skipMatch] * @returns {boolean} */ function match(element, skipMatch) { - if ( - !commonWords.length || - !tokens?.classes?.length || - !tokens?.selectors?.length || - !skips?.tags?.length - ) { + if (!tokens.selectors.length || !skips.tags.length) { return false; } @@ -245,7 +252,7 @@ function match(element, skipMatch) { return false; } - const tagName = element.tagName?.toUpperCase?.(); + const tagName = element.tagName.toUpperCase(); if (skips.tags.includes(tagName)) { return false; @@ -283,13 +290,13 @@ function match(element, skipMatch) { * @param {Node} node * @param {boolean} stopRecursion */ -function filterMapEarly(node, stopRecursion) { +function filterNodeEarly(node, stopRecursion) { if (node.nodeType !== Node.ELEMENT_NODE || !(node instanceof HTMLElement)) { return []; } if (commonWords && containsCommonWord(node) && !stopRecursion) { - return [node, ...[...node.children].flatMap((node) => filterMapEarly(node, true))]; + return [node, ...[...node.children].flatMap((node) => filterNodeEarly(node, true))]; } return [node]; @@ -300,12 +307,8 @@ function filterMapEarly(node, stopRecursion) { * @returns {void} */ function fix() { - const backdrops = document.querySelectorAll([ - '.modal-backdrop', - '.offcanvas-backdrop', - '.overlay', - ]); - const domains = (skips?.domains ?? []).map((x) => (x.split('.').length < 3 ? `*${x}` : x)); + const backdrops = tokens.backdrops.length ? [...document.querySelectorAll(tokens.backdrops)] : []; + const domains = skips.domains.map((x) => (x.split('.').length < 3 ? `*${x}` : x)); for (const backdrop of backdrops) { if (backdrop.children.length === 0 && backdrop.style.display !== 'none') { @@ -349,7 +352,7 @@ function fix() { if (domains.every((x) => !hostname.match(x.replaceAll(/\*/g, '[^ ]*')))) { for (const element of [document.body, document.documentElement]) { - element?.classList.remove(...(tokens?.classes ?? [])); + element?.classList.remove(...(tokens.classes ?? [])); element?.style.setProperty('position', 'initial', 'important'); element?.style.setProperty('overflow-y', 'initial', 'important'); } @@ -361,10 +364,12 @@ function fix() { * @returns {void} */ function restoreDOM() { - const backdrop = document.getElementsByClassName('modal-backdrop')[0]; + const backdrops = tokens.backdrops.length ? [...document.querySelectorAll(tokens.backdrops)] : []; - if (backdrop?.children.length === 0) { - backdrop.style.removeProperty('display'); + for (const backdrop of backdrops) { + if (backdrop.children.length === 0 && backdrop.hasAttribute(dataAttributeName)) { + backdrop.style.removeProperty('display'); + } } const elements = [...document.querySelectorAll(`[${dataAttributeName}]`)]; @@ -384,11 +389,11 @@ function restoreDOM() { /** * @description Clean DOM when this function is called - * @param {RunParams} params + * @param {RunParams} [params] * @returns {void} */ function run(params = {}) { - if (document.body?.children.length && !preview && state.enabled && tokens?.selectors?.length) { + if (document.body?.children.length && !preview && state.enabled && tokens.selectors.length) { fix(); if (params.elements?.length) { @@ -408,7 +413,7 @@ function run(params = {}) { ...[...(document.getElementById('app')?.children ?? [])], ...[...(document.getElementById('main')?.children ?? [])], ...[...(document.getElementById('root')?.children ?? [])], - ].flatMap((node) => filterMapEarly(node)) + ].flatMap((node) => filterNodeEarly(node)) ); } } @@ -417,19 +422,14 @@ function run(params = {}) { /** * @async * @description Set up the extension - * @param {SetUpParams | undefined} params + * @param {SetUpParams} [params] */ -async function setUp(params) { +async function setUp(params = {}) { state = (await dispatch({ hostname, type: 'GET_HOSTNAME_STATE' })) ?? state; dispatch({ type: 'ENABLE_POPUP' }); if (state.enabled) { - const data = await dispatch({ hostname, type: 'GET_DATA' }); - - commonWords = data?.commonWords; - fixes = data?.fixes; - skips = data?.skips; - tokens = data?.tokens; + data = await dispatch({ hostname, type: 'GET_DATA' }); if (count > 0) { dispatch({ type: 'SET_BADGE', value: `${count}` }); @@ -438,7 +438,7 @@ async function setUp(params) { dispatch({ type: 'ENABLE_ICON' }); observer.observe(document.body ?? document.documentElement, options); - if (!params?.skipRunFn) { + if (!params.skipRunFn) { run(); } } else { @@ -452,12 +452,12 @@ async function setUp(params) { * @type {MutationObserver} */ const observer = new MutationObserver((mutations) => { - if (preview || !state.enabled || !tokens?.selectors.length) { + if (preview || !state.enabled || !tokens.selectors.length) { return; } const nodes = mutations.flatMap((mutation) => [...mutation.addedNodes]); - const elements = nodes.flatMap((node) => filterMapEarly(node)); + const elements = nodes.flatMap((node) => filterNodeEarly(node)); run({ elements }); });