A few years ago, I built a browser extension to hide a distracting news section on LinkedIn. It worked by targeting the section's CSS classes, but eventually stopped working when the site replaced readable selectors with long, seemingly random class names. The same thing keeps happening: the page looks unchanged, yet the classes appear to be regenerated daily or after deployments. Is this a normal side effect of modern web development, or is it intentionally meant to prevent extensions and scraping? What would be a more reliable way to target the section?
4 Answers
The class names may be deterministic within one build but change whenever the bundle is regenerated. A small source change, dependency update, or deployment can alter the hashes throughout the output. That can make an extension break even though no visible design change was intended. Treat class selectors as temporary and keep a fallback or test that alerts you when the target markup changes.
Avoid depending on those hashed classes if you can. They are implementation details and may also be reused across unrelated elements. Prefer stable attributes such as an accessible aria-label, role, an intentional data attribute, or a meaningful element relationship. Be careful with deeply nested selectors or positional paths, since those can break when the page layout changes.
The section returning after you remove it is probably a separate issue. Many large sites are single-page applications that re-render parts of the DOM whenever navigation or state changes. Instead of deleting the node once with JavaScript, consider injecting a stylesheet that hides a stable target with !important. The rule will apply again whenever the site recreates the element, without needing to constantly remove it or observe every mutation.
Yes, this is common with modern build systems and CSS-in-JS or atomic CSS frameworks. The class names are often generated from hashes during compilation, so a new build can produce different names even when the page looks identical. It usually exists for style scoping, deduplication, and cache management—not specifically to defeat browser extensions.
Hierarchy-based selectors can work as a fallback, but they are usually more fragile than attributes tied to the element's purpose. Accessibility attributes are generally a better starting point because changing them can affect screen-reader behavior.