Hydration mismatch caused by browser extension injecting DOM before React hydration

[talha959]

Hi everyone,

I'm seeing a hydration mismatch warning in a Next.js application, but after inspecting the React diff, it appears the mismatch is caused by a browser extension rather than my application code.

Environment

• Next.js 16 (App Router)
• React 19
• Chrome

Error

Hydration failed because the server rendered HTML didn't match the client.
As a result this tree will be regenerated on the client.

React diff

<img
- data-ai-detector-processed="true"
>
- <div style={{ position: "absolute", top: "4px", right: "4px", zIndex: "10000" }}>

The component itself is simply rendering a next/image:

<div className="relative aspect-[4/3] overflow-hidden">
  <Image
    src={AUTH_HERO_IMAGE}
    alt="AQ Gimel cosmetics manufacturing"
    fill
    className="object-cover"
    sizes="(max-width: 1024px) 100vw, 50vw"
  />
</div>

I don't use:

• window
• localStorage
• Date.now()
• Math.random()

or any client-only branching during the initial render.

The extra attribute (data-ai-detector-processed) and the injected <div> do not exist in my source code, which makes me think they're being added by a browser extension before React hydrates.

Questions

1. Is this the expected behavior when browser extensions modify the DOM before hydration?
2. Is there any recommended way to reduce or suppress these false-positive hydration warnings?
3. Has anyone encountered similar issues with AI assistant or other DOM-modifying extensions?
4. Is there anything the application can do to avoid a full client re-render in this scenario, or is this unavoidable?

The application works correctly, but I'm trying to determine whether this is expected behavior or whether there's something I should investigate further.

Thanks!

[icyJoseph]

Hi,

Yes, as far as React is concerned, and this is not a Next.js thing necessarily, if the DOM that the server sent is not the same it encounters as it hydrates (to attach event listeners), then we have a problem, a safe way out is to render again, fresh in the client.

You can suppress these at DOM element level:

• https://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors

That'll also make it respect whatever it finds, but it could cause errors with event handlers, IIRC.

This used to happen a lot with Browser extensions that auto apply Dark Mode, or that fill in input fields ahead of time.

• https://nextjs.org/docs/messages/react-hydration-error

React 19 wanted to soften this, https://react.dev/blog/2024/12/05/react-19#compatibility-with-third-party-scripts-and-extensions, but I think it is still somewhat out-there.

One quick way to cross check this is to use Incognito Mode, or another browser, I typically have Firefox, Edge and Safari to verify various other things.

In this case though, your extension is trying to aggressively highlight text nodes, to label them. I think you'd need to assess how much this affects your user base experience.

[tamish560]

This is a known class of issue with browser extensions that inject attributes into the DOM. The data-ai-detector-pro attribute is being added by an extension before React hydrates, so the server HTML and client HTML don't match.

A few ways to handle it:

1. Suppress hydration warnings on specific elements (quickest fix):

<img src="..." suppressHydrationWarning />

This tells React to skip the diff check for that element. Safe because the extension attributes don't affect your app behavior.

2. Use useEffect to render client-only (if the whole component is affected):

const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return null;

3. Wrap in a layout effect to defer rendering:

useLayoutEffect(() => {
    // DOM is clean at this point
}, []);

Option 1 is the most practical. suppressHydrationWarning only suppresses warnings for that specific element, not its children, so it's safe to use surgically. The extension attributes will still be there after hydration, React just won't complain about the mismatch.

For a global fix, you can also add this to your root layout:

<html suppressHydrationWarning>

But that's heavy-handed. Better to target the specific elements that extensions tend to pollute (images, links, text containers).