This is the 34th post in an ongoing series describing new privacy and usability features in iBrowe. The work described below was done by Vadym Struts (Senior Software Engineer) and Kleant Zogu (Mobile Product Designer), and this post was written by Shivan Kaul Sahib (VP, Privacy and Security).
📱 Overview
iBrowe for Android 1.78 introduces a brand-new Shields option called Block Elements, which empowers you to remove any unwanted on-page clutter with a single tap. Most mobile sites are littered with distracting banners—promotional sidebars, “open in app” prompts, and intrusive ads—that waste precious screen space. While iBrowe already removes third-party ads, trackers, cookie consent notices, and other nuisances automatically, Block Elements gives you on-demand control to instantly hide any remaining annoyances that interfere with your reading or browsing.
🚀 How to Block Elements on Android
-
Open the Shields Panel
- Tap the Shields (🛡️) icon next to the address bar while on the page you want to clean up.
-
Enable Advanced Controls
- In the expanded Shields menu, tap Advanced controls (⚙️).
-
Activate Block Element Mode
- Tap Block element (🚫) to enter element-selection mode.
-
Select the Element
- Simply tap the on-screen element you wish to remove (e.g., a sidebar, banner, or intrusive widget). The element will be highlighted in a translucent overlay.
-
Confirm the Block
- Press the Block Elements button at the bottom of the screen. The selected element is immediately hidden, and the page layout reflows accordingly.
<details> <summary>Android Flow Demo (Tap to Expand)</summary>
- Tap Shields icon
- Tap Advanced controls
- Tap Block element
- Tap the unwanted banner
- Press Block Elements
- Watch the page update to remove the clutter
</details>
🖥️ How to Block Elements on Desktop
-
Right-Click on the Page
- Anywhere on the page, right-click (or two-finger tap) and choose Block elements (🚫).
-
Select the Element
- Your cursor changes to a selection tool. Hover over the element you want gone; it will highlight in yellow.
-
Confirm the Block
- Click Block Elements in the overlay prompt. The element is instantly removed, and the page will adjust to fill the space.
<details> <summary>Desktop Flow Demo (Tap to Expand)</summary>
- Right-click on the page
- Choose Block elements
- Click the unwanted ad or banner
- Press Block Elements
- See the page without the clutter
</details>
🧹 Clearing All Blocked Elements
At any time, if a page looks odd or you want to restore everything to its original layout, you can easily undo your custom blocks:
-
Open Shields
- Tap (Android) or click (Desktop) the Shields (🛡️) icon.
-
Clear All Blocked Elements
- Scroll to the bottom of the Shields panel and tap/click Clear all blocked elements (♻️).
- Note: This resets only for the current site. If multiple pages share the same domain, they will lose their custom blocks too.
<details> <summary>Clear Flow Demo (Tap to Expand)</summary>
- Open Shields
- Tap/click Clear all blocked elements (only appears if you’ve blocked something)
- All previously hidden elements reappear
</details>
🛠️ Customizing Blocking Rules
Under the hood, Block Elements creates custom, per-site cosmetic filters. You can view and manage these filters manually:
- Open Shields
- Tap “Manage filters” (Android) or navigate to
ibrowe://settings/shields/filters
(Desktop).- This shows a list of active custom rules (e.g.,
example.com#
).
- This shows a list of active custom rules (e.g.,
Desktop-Only: Slider & Rule Preview
- When you select an element, a slider appears to help you refine your selection—block siblings, parent elements, or narrow it down.
- Click Show rules to preview how the CSS selector changes as you adjust the slider.
🎨 Why Block Elements Matters
- Pinpoint Precision: Some page annoyances aren’t served as third-party iframes or scripts—only manual blocking catches them.
- Avoid Blank Spots: Instead of network-level blocking (which sometimes leaves white gaps), cosmetic hiding reflows the page seamlessly.
- No Global Impact: Only the site you’re on is affected; other pages remain unchanged.
- User-Friendly: A single tap is all it takes—no need to write CSS or install extra extensions.
⚠️ Best Practices & Caveats
- Site Updates May Break Filters
- If the website’s HTML changes (new class names or DOM structure), your custom rule may no longer match. Simply re-apply Block Elements to select the new element.
- Overblocking Can Break Functionality
- Hiding a parent container of a button or essential content can render parts of the page unusable. If a page appears broken, use Clear all blocked elements to restore it.
- Temporary vs. Persistent
- Custom blocks persist until you clear them. If you revisit a page weeks later and the site has changed, be prepared to re-select elements.
🔍 Examples of Use Cases
- Recipe Sites (🍲)
- Hide endless pop-up prompts like “Sign up to see the rest of the recipe.”
- News Portals (📰)
- Remove sticky “Subscribe now” banners or trending article sidebars to focus on the story text.
- Video Platforms (🎥)
- Conceal overlay ads or autoplay previews that obstruct playback controls.
- Forums & Q&A Sites (💬)
- Collapse distracting call-to-action panels, like “Download our app” popups.
🤝 User Feedback & Community
We want Block Elements to work flawlessly. If you encounter any odd behavior or think of ways to improve the experience, please let us know:
- Community Forum: community.iBrowe.com
- GitHub Issues: Submit feedback or bug reports under the iBrowe/issues repository.
Your reports help us refine the feature and keep the Web user-first.
⭐ Final Thoughts
With Block Elements, iBrowe for Android brings you complete control over your browsing canvas. Whether it’s a rogue promo popup, a sticky sidebar ad, or an unclosable widget, you can now permanently hide it—no coding required. This new feature complements iBrowe’s existing Shields protections, ensuring a faster, cleaner, and more private mobile browsing experience.
Enjoy a clutter-free Web, and happy browsing!