I released a new iOS app named Unobstruct, which helps you read web pages unobstructed. It includes a Safari Content Blocker that removes some persistent bars from certain web pages (like Medium, The Verge, Vox, CNN, and several others) and an Action Extension for Safari that removes any remaining floating content from a web page on demand. You can buy it for a dollar in the iOS App Store.
Read below for more detail on how it came about, or skip to the following section for details about how to install and use its components.
Genesis
A couple weeks ago, I was reading an article on my iPhone that someone had written on Medium after finding a link to it in Twitterrific, my Twitter client of choice. Since it wasn’t too long, I was just reading it in the in-app web view.
As had happened in the past, I became annoyed by the bar and floating button at the bottom of the Medium page, which on such a small screen used up a not-insignificant amount of the vertical space. John Gruber had recently written about this in his post Medium and the Scourge of Persistent Sharing Dickbars on Daring Fireball.
However, this time, something new occurred to me: this was a Safari view, so what if I had a Safari Content Blocker app that removed these bars the same way ad-blocking apps remove ads from web pages?
I went to my computer, started a new Xcode project, and a little while later, I had a way to remove these from Medium’s pages on my iPhone and iPad for good.
[Note that recently Medium made an improvement: their bottom-bar now only shows up when scrolling backward and disappears when scrolling forward, so apparently they also read Daring Fireball.]
After I had bar-blocking in Medium working, I re-read John’s post and looked at the other sites he mentioned. I could block the “social media sharing bars” on most of these sites as well.
Some sites, however, like Wired, have a persistent bar that, if removed by a content blocker, would effectively break the page navigation. Usually these bars at are the top of the screen and have the site logo on them (and sometimes some other content, like Subscribe links, etc.).
Thankfully, John had also mentioned a tool in a subsequent post on Daring Fireball, linking to Kill Sticky Headers by Alisdair McDiarmid. Alisdair provided instructions for adding a short JavaScript “bookmarklet” to a browser’s bookmarks (usually on the desktop) that removes all items from an HTML page that were set to float above the content and not scroll.
Getting a bookmarklet installed on an iPhone and subsequently using it each time is a bit of a hassle. But it occurred to me that Safari also supports a feature apps can plug into known as Action Extensions. Simply put, this allows an app to supplement the actions you can take when you tap on the “Share” icon in Safari. The actions are the row of black-and-white icons at the bottom, such as “Add to Reading List”, “Copy”, and “Find on Page”. So my app could include an icon there that would remove any floaters that remained.
Now that I had all this working, I needed a good app name and icon. I’d come up with the tag line “Read web pages unobstructed” for the app, but wasn’t happy with the first name I had given it. After searching for another one, I settled on “Unobstruct” from that early tag line.
I also had asked my friend and co-worker Gedeon Maheux if he’d do an icon for the app. After some thought, which Ged details in a post on his blog, he presented several concepts. My favorite one (since it had the most character and attitude) was polished into the final icon.
Installation and Usage
To use Unobstruct, you first have to buy it from the iOS App Store.
After downloading it, you can launch the app to get a quick summary of installation instructions on the main screen (which will also tell you if the Content Blocker is active). Enabling the Content Blocker requires you launch the Settings app on your iPhone or iPad, scroll down to select Safari, pick Content Blockers, and turn the switch next to Unobstruct to the on position.
If you wish to see a page with any bars Unobstruct may have blocked intact, you can long-press the reload icon in Safari and select “Reload Without Content Blockers” (this will also disable any ad-blocking you may have installed when reloading that page).
To use the Unobstruct Action Extension, tap the Share button in the toolbar at the bottom of Safari (you may need to tap the address bar if the toolbar has been hidden by scrolling down a page). The actions are in the bottom row. If you scroll to the end of the list, there’s an item named “More”. Under this is a list of all the available actions, both built-in and app-provided. When Unobstruct is installed on your phone, you will have one named “Unobstruct Page”, which you can enable by turning the switch next to it on. I’d also recommend you drag it up in the list so it’s one of the first few items, as that makes it quicker to use when you find a page you want to hide floating content on.
After you’ve hidden floating content using the Unobstruct Page action extension, you can simply reload the page if you want to see those floating items again (for example, if you need them to navigate elsewhere on the web site).
Future
Hopefully web site creators get the hint and stop adding such overlays to their web pages. But even so, the action extension’s ability to hide any floating content should remain useful. Also if you notice any popular web sites with persistent bottom bars that aren’t automatically blocked by Unobstruct’s content blocker, by all means report them (there’s an item in the Unobstruct settings to send in an email) and I’ll look into adding more sites in future updates.
