How we redesigned browser extensions for a mobile-first world

The internet is not one size fits all. Browser extensions make it work well for different people and are ubiquitous on desktop browsers. But the mobile browser has never enjoyed extensibility in the same way, even though we now spend more time on it than desktop. [1]

The iPhone was the first phone to be able to have a full web browser back in 2007. But iOS Safari never became extensible. Some mobile browsers come bundled with ad-blocking, and there is a limited way to do extensions in Safari.

Why do we need an extensible iOS browser?

There are those of us who grew up on desktop and miss extensions when we're on our phones. But more importantly, we now have a generation of users growing up with their phones being their primary device and not all these kids are having their brains rotted by mobile usage. Many are creating and remixing powerful, in-depth content.

What constraints are unique to mobile?

From a technical point of view, Apple has restricted what developers can do with WKWebView, so we can't have the exact same extensions as we do on desktop. For example, you can't run Javascript in background tabs.

Many of these restrictions are sensible from a user experience point of view, and Apple made browsers as stable as they needed to be as a result of these restrictions.

But restrictions aren't always bad. When I worked at Mozilla in 2010 around the time an early version of the WebExtensions format was being developed, and despite being a "restriction" on what browser extensions could do, the simplified spec actually made extensions much more stable and accessible to a larger pool of users.

What do extensions do, really?

The WebExtensions spec has been very stable for a while so we take it for granted on desktop. Moreover, we take it for granted that it cannot be replicated on mobile.

But when you think of what extensions do for the user, we surveyed existing extensions on the Chrome extensions store and realized that most of them fit one of these patterns:

  1. Augment pages with useful content (coupons, privacy data, etc.)
  2. Cleans up pages by removing content (ads, trackers, distractions)
  3. Scrapers or developer tools

Pattern #3 is particularly challenging to do on mobile and we think is best done with standalone apps, e.g. Inspect.

How we reimagined extensions mobile-first

Screen Shot 2020-11-17 at 5.59.22 PM.png
  • We focused on augmenting and cleaning up pages to make browsing the internet a more pleasant experience for most people. This is the dominant use case for extensions when you analyze the downloads data.
  • People take far less time to set up their mobile browsers, so it's important to be useful out of the box. Insight thus suggests extensions from its collection as you browse the web.
  • Finally, we reimagined the interaction design to be mobile first, incorporating easy swipe gestures as a first-class action.

With this, we're able to bring browser extensions to phones in an intuitive, usable way and without sacrificing their power. With this, developers can do amazing things like make the web more readable for people with ADD, block sites from tracking you and read the news more efficiently than ever before.

What's next

It's early days but our mission is ambitious — we want to rid the internet of bad ads, SEO and misinformation. We're excited to share these extensions with you and even more excited to see what you all build and share (join our slack community)

Some of our personal favorites so far have been:

  • Invert colors when the phone is in dark mode
  • Detect fake reviews on Amazon (via Fakemeta) and set price alerts (via CamelCamelCamel)
  • Search extensions that search only sites you trust when searching Google

These are all built into Insight and automatically suggested as you use those sites. We can't wait to see what you build!



Get Insight for iOS

Apple App Store