feat(browser-extension): add two new handlers to inject css avoiding to inject them always, also disable animations that are causing problems

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;

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);
   }
 })();

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