This is the thirty-second post in an ongoing series showcasing new privacy and customization features in iBrowe. This update highlights work by Pavel Beloborodov (Senior Software Engineer) and is written by Shivan Kaul Sahib (Lead for Privacy Engineering).

📋 Overview

Starting with iBrowe Desktop 1.75, advanced users can now inject their own JavaScript—known as custom scriptlets—into any webpage. This feature puts powerful, fine-grained control in your hands, allowing you to tweak site layouts, block dynamic annoyances, or even shim missing functionality. Unlike installing third-party extensions (which may carry risks), iBrowe’s custom scriptlets are built into the browser, run only locally, and never leave your device. ⚡️

🔍 1. Why Custom Scriptlets Matter

1.1 Built-in Adblock and Privacy Protections

  • iBrowe Shields already blocks third-party ads, trackers, cookie banners, and more out of the box—no extensions needed.
  • Default Privacy: Everything is enabled automatically, so users immediately benefit from a cleaner, faster, and safer browsing experience. 🚀

1.2 The Case for Greater Customization

  • Edge-Case Fixes: Some websites break or display unwanted popups that can’t be handled with static filters.
  • Personal Tweaks: Users may want to remove a sidebar, restore disabled right-click menus, or inject dark mode styles on a per-site basis.
  • Debugging and Development: Power users and developers can test workarounds for site bugs or performance bottlenecks on the fly.

By exposing a Developer Mode toggle for custom scriptlets, iBrowe empowers users who are comfortable writing JavaScript to tailor any page without risking broader browser security. 🛡️

🔨 2. How to Enable and Write Custom Scriptlets

2.1 Turning On Developer Mode

  1. Open Settings
    • Click the menu icon (⋮) in the top-right corner and select Settings.
  2. Navigate to Shields → Content filtering
    • Or visit: ibrowe://settings/shields/filters.
  3. Scroll Down and Enable “Developer Mode”
    • Toggle on Developer Mode under the Custom scriptlets section.
    • A warning appears—read carefully and proceed only if you trust your scripts.

2.2 Creating a Custom Scriptlet

  1. Click “Add new scriptlet” under Custom scriptlets.
  2. Name Your Scriptlet (prefix user- will be added automatically).
  3. Write Your JavaScript in the provided editor.
    • Example: Remove a cluttered sidebar on stackoverflow.com:
      // Hide left and right sidebars for distraction-free reading
document.querySelectorAll('.left-sidebar, .right-sidebar').forEach(el => el.remove());
document.querySelector('.mainbar').style.margin = '0 auto';
  4. Click Save
    • The scriptlet is now stored locally and will run on matching pages.

2.3 Applying the Scriptlet to a Website

  1. Add a Custom Filter Rule
    • Under Custom rules, click Add new rule.
    • Use the syntax:
      example.com##+js(user-myScriptlet.js)
      Replace example.com with your target domain and user-myScriptlet.js with your scriptlet’s name.
  2. Save Changes and Reload the Page
    • Your JavaScript will execute immediately, modifying the page as intended.

🔧 Tip: Use wildcards (*.example.com) or path fragments (example.com/path/*##+js(...)) for more precise targeting.

🔍 3. Example Use Cases

3.1 Removing Distracting Sidebars

  • Before: StackOverflow shows ads and “Related” questions in sidebars.
  • After:
    document.querySelectorAll('.sidebar-wrapper').forEach(el => el.remove());
document.querySelector('#mainbar').style.width = '100%';