feat(scripts): improve code and replace fixes logic

scripts/content.js

@@ -12,6 +12,13 @@ let classes = [];
 
 const dispatch = chrome.runtime.sendMessage;
 
+/**
+ * @description Array of instructions
+ * @type {string[]}
+ */
+
+let fixes = [];
+
 /**
  * @description Hostname
  */
@@ -22,20 +29,20 @@ const hostname = document.location.hostname;
  * @description Is consent preview page?
  */
 
-const isConsentPreview = hostname.startsWith("consent.");
+const isPreview = hostname.startsWith("consent.");
 
 /**
  * @description Options provided to observer
  */
 
-const options = { childList: true, subtree: true };
+const options = { attributes: true, childList: true, subtree: true };
 
 /**
  * @description Selectors list
- * @type {string}
+ * @type {string[]}
  */
 
-let selectors = "";
+let selectors = [];
 
 /**
  * @description Target provided to observer
@@ -51,8 +58,8 @@ const target = document.body || document.documentElement;
 const check = (node) =>
   node instanceof HTMLElement &&
   node.parentElement &&
-  !["APP", "ROOT"].includes(node.id.toUpperCase()) &&
+  !["BODY", "HTML"].includes(node.tagName) &&
-  !["BODY", "HTML"].includes(node.tagName);
+  !["APP", "ROOT"].includes(node.id.toUpperCase());
 
 /**
  * @description Cleans DOM
@@ -62,12 +69,11 @@ const clean = () => {
   if (selectors.length) {
     const nodes = document.querySelectorAll(selectors);
 
-    for (let i = nodes.length; i--; ) {
+    nodes.forEach((node) => {
-      const node = nodes[i];
       const valid = check(node);
 
       if (valid) node.outerHTML = "";
-    }
+    });
   }
 };
 
@@ -76,108 +82,100 @@ const clean = () => {
  */
 
 const fix = () => {
-  const automobiel = /automobielmanagement.nl/g.test(hostname);
   const body = document.body;
-  const facebook = document.getElementsByClassName("_31e")[0];
+  const frame = window.frameElement;
-  const frame = document.location.ancestorOrigins.length;
-  const google = document.querySelector('form[action*="consent.google"]');
   const html = document.documentElement;
-  const play = hostname.startsWith("play.google.");
-  const yahoo = document.querySelector("#consent-page");
 
-  if (automobiel && body) {
+  if (body && html) {
-    for (let i = body.childNodes.length; i--; ) {
-      const node = body.childNodes[i];
-
-      if (node instanceof HTMLElement) {
-        node.style.setProperty("filter", "initial", "important");
-      }
-    }
-  }
-
-  if (body) {
     body.classList.remove(...classes);
-
-    if (!frame) {
-      body.style.setProperty("overflow-y", "initial", "important");
-      body.style.setProperty("position", "initial", "important");
-    }
-  }
-
-  if (facebook) {
-    facebook.style.setProperty("position", "initial", "important");
-  }
-
-  if (google) {
-    const submit = google.querySelector("button");
-
-    if (submit && submit instanceof HTMLElement) {
-      submit.click();
-    }
-  }
-
-  if (html) {
     html.classList.remove(...classes);
 
     if (!frame) {
+      body.style.setProperty("position", "initial", "important");
+      body.style.setProperty("overflow-y", "initial", "important");
       html.style.setProperty("position", "initial", "important");
       html.style.setProperty("overflow-y", "initial", "important");
     }
   }
 
-  if (play) {
+  fixes.forEach((fix) => {
-    const node = document.querySelector("body > div");
+    const [match, selector, action, property] = fix.split("##");
 
-    if (node && node instanceof HTMLElement) {
+    if (hostname.includes(match)) {
-      node.style.setProperty("z-index", "initial", "important");
+      switch (action) {
-    }
+        case "click":
-  }
+          const submit = document.querySelector(selector);
-
-  if (yahoo) {
-    const submit = yahoo.querySelector('button[type="submit"]');
 
           if (submit && submit instanceof HTMLElement) {
             submit.click();
           }
+          break;
+        case "reset":
+          const node = document.querySelector(selector);
+
+          if (node && node instanceof HTMLElement) {
+            node.style.setProperty(property, "initial", "important");
           }
+          break;
+        case "resetAll":
+          const nodes = document.querySelectorAll(selector);
+
+          nodes.forEach((node) => {
+            if (node instanceof HTMLElement) {
+              node.style.setProperty(property, "initial", "important");
+            }
+          });
+          break;
+        default:
+          break;
+      }
+    }
+  });
 };
 
 const observer = new MutationObserver((mutations, instance) => {
   instance.disconnect();
   fix();
 
-  if (!isConsentPreview) {
+  if (!isPreview) {
-    for (let i = mutations.length; i--; ) {
+    mutations.forEach((mutation) => {
-      const mutation = mutations[i];
+      mutation.addedNodes.forEach((node) => {
-
-      for (let j = mutation.addedNodes.length; j--; ) {
-        const node = mutation.addedNodes[j];
         const valid = check(node);
 
         if (valid && node.matches(selectors)) node.outerHTML = "";
-      }
+      });
-    }
+    });
   }
 
   instance.observe(target, options);
 });
 
 /**
- * @description Setups classes selectors
+ * @description Queries classes selectors
  * @returns {Promise<{ classes: string[] }>}
  */
 
-const setupClasses = () =>
+const queryClasses = () =>
   new Promise((resolve) => {
     dispatch({ type: "GET_CLASSES" }, null, resolve);
   });
 
 /**
- * @description Setups elements selectors
+ * @description Queries fixes instructions
+ * @returns {Promise<{ fixes: string[] }>}
+ */
+
+const queryFixes = () =>
+  new Promise((resolve) => {
+    dispatch({ type: "GET_FIXES" }, null, resolve);
+  });
+
+/**
+ * @description Queries elements selectors
  * @returns {Promise<{ selectors: string }>}
  */
 
-const setupSelectors = () =>
+const querySelectors = () =>
   new Promise((resolve) => {
     dispatch({ type: "GET_SELECTORS" }, null, resolve);
   });
@@ -189,7 +187,7 @@ const setupSelectors = () =>
 
 document.addEventListener("readystatechange", () => {
   dispatch({ hostname, type: "GET_CACHE" }, null, async ({ enabled }) => {
-    if (document.readyState === "complete" && enabled && !isConsentPreview) {
+    if (document.readyState === "complete" && enabled && !isPreview) {
       fix();
       clean();
       setTimeout(clean, 2000);
@@ -206,9 +204,14 @@ dispatch({ hostname, type: "GET_CACHE" }, null, async ({ enabled }) => {
 
   if (enabled) {
     dispatch({ type: "ENABLE_ICON" });
-    const results = await Promise.all([setupClasses(), setupSelectors()]);
+    const results = await Promise.all([
+      queryClasses(),
+      queryFixes(),
+      querySelectors(),
+    ]);
     classes = results[0].classes;
-    selectors = results[1].selectors;
+    fixes = results[1].fixes;
+    selectors = results[2].selectors;
     observer.observe(target, options);
   }
 });