improve robustness of finding AI element

background.js

@@ -0,0 +1,26 @@
+chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
+  if (
+    tab.url &&
+    tab.url.includes("://www.google.com/search") &&
+    changeInfo.status == "loading"
+  ) {
+    chrome.storage.local.get(["overviewClass"], function (result) {
+      if (result.overviewClass) {
+        // If an ID is stored, inject CSS to hide the element with that ID
+        const classNames = result.overviewClass.split(" ");
+        const cssCode = classNames
+          .map((className) => `.${className} { display: none !important; }`)
+          .join(" ");
+        chrome.scripting.insertCSS(
+          {
+            target: { tabId: tabId },
+            css: cssCode,
+          },
+          () => {
+            console.log(`AI Overview class "${result.overviewClass}" hidden`);
+          }
+        );
+      }
+    });
+  }
+});

content.js

@@ -1,27 +1,29 @@
-//Backup script if content is every dynamically loaded
-//or if CSS fails for whatever reason...
+var headers = document.querySelectorAll("h1");
 
-var AIheaders = document.querySelectorAll("h1");
-var AIparentElement = document.querySelector(".M8OgIe");
-var AIparentElementPreLoad = document.querySelector(".rEow3c");
+function findParentWithCorrectAttributes(element) {
+  while (element && element.parentElement) {
+    element = element.parentElement;
+    if (element.hasAttribute("jsname") || element.hasAttribute("id")) {
+      return element;
+    }
+  }
+  return null;
+}
 
-if (
-  AIparentElementPreLoad &&
-  AIparentElementPreLoad.firstChild.tagName === "H1" &&
-  AIparentElementPreLoad.firstChild.textContent.trim() === "Search Results"
-) {
-  AIparentElementPreLoad.style.display = "none";
-} else if (
-  AIparentElement &&
-  AIparentElement.firstChild.tagName === "H1" &&
-  AIparentElement.firstChild.textContent.trim() === "Search Results"
-) {
-  AIparentElement.style.display = "none";
-} else {
-  // Iterate through each h1 element to find the one with the exact text "AI Overview"
-  Array.from(AIheaders).forEach(function (header) {
-    if (header.textContent.trim() === "AI Overview") {
+// Iterate through each h1 element to find the one with the exact text "AI Overview"
+Array.from(headers).forEach(function (header) {
+  if (header.textContent.trim() === "AI Overview") {
+    const parent = findParentWithCorrectAttributes(header);
+    if (parent) {
+      parent.style.display = "none";
+    } else {
       header.parentNode.style.display = "none";
     }
-  });
-}
+
+    if (parent.className || header.parentNode.className) {
+      chrome.storage.local.set({
+        "overviewClass": parent.className || header.parentNode.className,
+      });
+    }
+  }
+});

manifest.json

@@ -3,16 +3,20 @@
   "name": "Hide Google AI Overviews",
   "version": "1.0",
   "description": "Hide annoying Google AI Overviews.",
+  "permissions": ["storage", "scripting", "tabs"],
   "icons": {
     "16": "icons/strikeAI16.png",
     "48": "icons/strikeAI48.png",
     "128": "icons/strikeAI128.png"
   },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "host_permissions": ["*://*.google.com/search*"],
   "content_scripts": [
     {
-      "matches": ["*://*.google.com/*"],
-      "js": ["content.js"],
-      "css": ["styles.css"]
+      "matches": ["*://*.google.com/search*"],
+      "js": ["content.js"]
     }
   ]
 }