MobileSafariFind is a bookmarklet that adds an in page search capability to the iPhone version of Safari. Some of the features:

  • Comes with a small and simple UI
    • Allows navigation through search results
    • Shows number of results and current position
    • Adapts to the zoom level, orientation and the position on the page
  • Leverages native browser features as much as possible and operates on the DOM through the API only to ensure the page stays functional
  • No load time dependencies, all that is needed comes tightly packaged in less than 6KB. You can use it with or without a connection.

I prepared a little installation guide that describes the simplest way to add a bookmarklet (apart from syncing your Safari bookmarks of course).

The bookmarklet is released under MIT License and available on GitHub.

Motivation

The solutions I found when I started developing this bookmarklet were not very good and basically all worked like this:

document.body.innerHTML=document.body.innerHTML
.replace(/search/gi, '<span style="color:yellow">$1</span>');

There are two problems with that:

  1. Operating on the DOM as text is unnatural and errorprone, consider the following example: 
    <input type="submit" value="search"/>

    becomes

    <input type="submit" value="<span style="color:red">search</span>"/>

    Since browsers learned to parse even the shittiest HTML over the past 15 years you are in luck, it won’t show a blank page or even crash, but you definitely just broke the page. If you are now tempted to show off your mad regex skills to work around such a case misery will commence sooner or later.

  2. Any event listeners that are not part of the markup (<a onclick=”…”/>) are gone, as well as any references to DOM Nodes (they are technically they are still there, but are now zombie fragments without a document). With more and more pages becoming more on more ajaxy that’s not very good.

Both things are easily solvable by reloading the page, but maybe I already filled out part of a form, have a slow connection or even no connection at all. Anyway, it’s a shitty user experience and makes the thing more painful than useful.

Exceptionally bad timing. Or: FML

The missing in page search was something that bothered me for a while, in December 09 I googled for bookmarklets that would provide this feature. As mentioned above I only found crappy ones that were more frustrating than helpful, so I decided to start building my own. With a lot of “dry spells” in between I finally brought it to a point where the thing was releasable. Looking for the bookmarklets I found back in December to include in this post I then found this:

http://findinpage.blogspot.com

It is practically the same thing I did. Released in mid-January. I haven’t tried it yet but from the posts and the videos these seem to be the differences:

  • The bookmarklet comes along as a paid app in the AppStore. In fact the app is simply a “delivery container” since all it does is provide a button to load the JavaScript code into your clipboard.
  • It allows subsequent queries
  • It allows regular expressions

Now there are a lot of mixed feelings. If I hadn’t spend so much time writing my own bookmarklet then I would probably be pretty happy about finally having found the thing I searched for. I would still find it a little odd to package that thing in an app, but hey: From the videos it looks decent, so why shouldn’t he get money for the thing he built.

But I did spend much time on writing my own, and so — probably jealous for not having released mine first — I focus on things like weird, pretentious press releases where he writes about himself in third person. It also reminds me how much I dislike those useless, incestuous PR/marketing blog networks.

Well, I guess that’s life. I will definitly try his app and of course peek into the source code. :)