Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

How to use iOS 9 content blockers to remove web popover boxes

Glenn Fleishman | Sept. 18, 2015
Many sites overlay boxes with reminders, calls to action, and other nuisances you've dismissed again and again. Some iOS 9 content blockers can remove them.

In Settings > Safari > Advanced, enable Web Inspector.

  • Connect your iOS device to a Mac via USB.

  • On the Mac, go to Safari > Preferences > Advanced, and check the Show Develop Menu in Menu Bar.

  • In the Develop menu, with the page open on your iOS device in Safari, select your device name and the page. The raw HTML of the page will load.

  • Now as you hover over HTML in Safari in OS X, areas of the page in Safari in iOS will highlight.

  • When you’ve found the box (in this case, a subscription reminder at the Washington Post), look for div id="name" at the top. The name here is wp_Alert.

  • popover blocking wp box html
    Find the segment of HTML that corresponds to the box, and note its ID name.

    A few of the early content-blocking filter apps let you block CSS elements by name. I’ll walk through the steps for 1Blocker:

    1. Launch 1Blocker.

    2. Tap Customize.

    3. Under Configurable, tap Hide Page Elements.

    4. popover blocking filter config
      Fill out a 1Blocker filter to suppress the popover.
    5. Now:
      1. Name it descriptively, like “WaPo article reminder”.
      2. Enter the CSS selector. IDs have to be preceded with a hash sign, so our example is entered as #wp_Alert.
      3. Tap Hide Only for Particular Domains.
      4. Enter the domain; here, washingtonpost.com.
    6. Tap Save.

    7. Now go back to Safari and reload the page: the popover should now be missing.

    popover blocking filter enable
    The finished filter can be flipped on and off, too.

    Some websites either already use random ID names or will start doing so. Others may obfuscate the popover box’s container, making it impossible to identify. But for many sites, this will let you browse in peace without them missing out, either.

    popover blocking box removal side by side
    At left, the page with a popup. At right, reloading after installing the CSS box filter.

     

    Previous Page  1  2 

    Sign up for CIO Asia eNewsletters.