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; +}