When you inject a small badge or overlay into a third-party website from a browser extension content script, it works fine on your test page. Then you open a real shop and your badge is giant, transparent, stuck in the bottom-left corner, or missing its close button.

I hit this on Monoprix while testing ShrinkWatch EU , an open-source extension that shows unit prices (per kg, per litre or per piece) and shrinkflation warnings on European supermarket web shops.

What the host page does to your DOM

Supermarket frontends are ten years of CSS resets, utility classes and aggressive global selectors piled on top of each other:

div { position: relative } or div { box-sizing: content-box }

button { all: unset } or button { width: 100%; background: green !important }

span { display: block; color: inherit }

Global font-size: 62.5% on html , which shrinks every rem -sized rule in your stylesheet

Even if you prefix every class name with sw- , bare element rules ( div , span , button ) and inherited properties (…