How to Get Rid of Google AI Overview in Firefox (and Safari)

Defeating AI Overview without any further tools or extensions.

Title illustration

So, here is a short guide to how to get rid of Google AI Overview in Firefox without the help of any special tools or extensions.

Disclaimer: Follow only, if you have an idea what this is about. Do so on your own risk. Mind that this may have side-effects on other documents and services provided by Google.

1) Set up Firefox For Using Local CSS Rules

Firefox comes with a built-in mechanism for overriding default display rules or any such rules, which are defined by web pages, by user-defined, local ones. Here’s how to set this up:

1.1) Locate your profile folder

Either enter “about:support” in the location bar of a Firefox window, or go to the menu “Help” (you may have to hold down the ALT key to see this) and select “More Troubleshooting Information”.

This will display a page “Troubleshooting Information” with a table “Application Basics”. Locate the entry “Profile Folder” and click the button next to it to open this (there’s also the path displayed next to this.)

1.2) Create a few necessary files

In your profile folder create

file structure

(“userChrome.css” is for customizing the Firefox UI, “userContent.css” is for defining special rules that apply to any websites. The term “chrome” refers to the user interface in general.)

1.3) Activate local display rules

As a final step, we must activate any rules, which we may write into these files.

Enter “about:config” into the location bar and confirm the warning dialog. Then, in the page which will open, search for the following property:

toolkit.legacyUserProfileCustomizations.stylesheets
setting the config property

Set this to `true`. Click the toggle icon on the right to do so.
(This will require a restart of Firefox to take effect. But we’ll come to this anyway…)

2) The Main Act: Defining a Rule to Suppress AI Overview

Open the file “userContent.css”, we just created, in a text editor. Enter the following CSS code and save it.

@moz-document domain(google.com) {
     div[data-subtree="mfc"] { display: none !important; }
}

(This defines a rule, which only applies to web pages originating from the domain “google.com” and inhibits the display of any <div> elements with the attribute “data-subtree="mfc"”. As it happens, AI Overview is one of them. Maybe it’s the only one, maybe there are more of them — I really don’t know.)

3) Restart Firefox for the Rule to Become Effective

To disable this rule, do any of the following:

(Any of this will require another restart of Fireforx to become effective.)

4) Enjoy Life Like it’s 2024…

smile

Bonus Content: User Stylesheets in Safari (Desktop)

Apple Safari has a similar concept for user-defined stylesheets, but with a bit more of a standard approach and a bit more freedom on the user side. Here’s a brief how-to:

1) Open a text file and enter the following content:

:root[location*="google.com"] div[data-subtree="mfc"] {
  display: none !important;
}

Save this under some memorable name in a memorable location (e.g., “safari-user-styles.css” in your Documents folder.)

(This is really the same rule as above, but without using Mozilla/Firefox-specific grammar to specify the location of origin.)

2) In Safari, open the Preferences (in the Safari menu), go the “Advanced” tab. Select under “Style Sheet” the stylesheet, you just created, as shown:

Safari Preferences, Advanced tab

This will open a file dialog to locate the CSS stylesheet document. Once selected, this pop-up should show the name of the selected document.

(To disable this, simply set this pop-up menu to “None Selected”. No restart should be required for this to take effect.)

3) Enjoy…

— And that’s all folks. —