How to hide elements permanently in Chrome

Browser devtools can delete an element, but it comes straight back on refresh.

BowerBird writes a stable CSS rule instead of deleting a node, so the element is gone on the next visit and the one after that.

Why the usual fixes do not stick

The devtools approach fails because it edits the live DOM, and the DOM is rebuilt on every load. Custom userstyle extensions work, but require you to write CSS by hand and to find a selector that survives the next deploy. Generating a stable selector is the hard part, and it is the part worth automating.

How to do it with BowerBird

1. Right-click anything on any page.
2. Choose Hide this element with BowerBird.
3. Use the scope chips to hide just that item, everything like it, or the whole container.
4. Manage or undo every rule from the settings page.

Without granting access to every site you visit

BowerBird installs without asking to read or change your data on any website. Its ad and tracker blocking runs on rules the browser applies itself, which needs no site access at all. When you hide your first element on a site, it asks for that one site, from your click, and you can revoke it later in settings.

Compared with Free element hiders

They are free and simple. For hiding a handful of elements on sites you visit daily they are entirely sufficient, and you do not need BowerBird.

The honest question is whether pointing at everything yourself is tedious enough to pay once to avoid. If it is not, use the free ones.

Related