Complete tutorial with video: extend the functionality of your iPhone Web browser!

By Werner Ruotsalainen Mon, 11/30/2009

I’ve elaborated on the highly useful scriptlets in several of my articles. These are special bookmarks invoked when you want to do some specific action on a Web page already loaded; for example, scrolling to the bottom or finding a specific word. They vastly enhance the functionality of all scriptlet-capable Web browsers; as of the time of writing, any Safari version, iCab Mobile 2.0, Journey Web Browser 1.3, iNetDual 1.2.0, Perfect Browser 2.7 and Full Screen Web Browser 1.1.1 – and all this without (!) jailbreaking your phone.

The dedicated articles I’ve written so far are as follows. You may want to take a look at them so that you know what this is all about. Don’t despair if you don’t understand everything, you aren’t required to do so at this time: I only provide you with these links because these old articles still have some pictures of some of the excellent add-on functionalities you can get with these scripts. (Should you need another, gentle introduction to them, check THIS out. Note that the links provided there are only usable with desktop Safari users and you will NOT want to click them if you’re reading the page with another browser. In Chapter 3, I provide you with an iPhone-compatible version of all those scriptlets you can deploy right on your phone, without having to rely on synchronizing your bookmarks from the desktop Safari.)

Great iPhone Web browser hack: make (unreadably) small text much larger!

I’ve further enhanced the "make your Web browser text larger" scriptlet – now, it’s 100% compatible with every page! - to increase the spacing between rows in some (rare) cases where the previous hack messed the spacing up

Another revolutionary multiplatform utility by me: add "find in page" support to most mobile web browsers!!! – 1. to implement “find in page” in both Safari and some third-party browsers 2. to quickly down to the bottom of the page in Safari and some third-party browsers

In this article, I provide you with two brand new videos of adding these scriptlets (I’ve created two videos showing the OS3+ copy/paste based scriptlet addition and the original, pre-OS3 favorite adding/editing-based one) – and a lot of new ones, including a “find in page” one that also supports “scroll to the next occurrence” functionality previously missing from all comparable scriptlets.

First, Chapter 1 explains how pure text scriptlets (ones that aren’t “clickable”) should be added (via copy/paste). Then, Chapter 2 elaborates on adding them via the standard (“clickable”) URL add method not necessitating any copy/paste support. In Chapter 3, I elaborate on how scriplets from lifeclever.com can be added. In that chapter, I list the support for pure Javascript URL’s in current Web browsers and I also provide you with the scriptlets compatible with all iPhone browsers as separate links. That is, I explain adding the very nice lifeclever.com scriptlet repository right on your iPhone, without having to resort on using Safari on the desktop (I don’t even have it there – I prefer Opera for browsing on desktop computers, mostly because of Opera Link.).

1. Creating scriptlets by copy/paste

The newer approach of adding scriptets right on the iPhone, copy/paste, is preferable under OS3+, unless the scriptlet is messed up by a forum engine, say, introducing additional space characters here and there, in a random fashion. The iPhone Life blog engine isn’t like this; that is, if you do need the original scriptlet and want to copy / paste it, your safest bet is clicking for example THIS link and, at least as far as scriptlet-related articles are concerned, stay there, in the original blog.

The tutorial video is HERE. It shows how a scriptlet can be added in Safari by simply editing a previous bookmark (here, it’s the current one but it can be anything else) and simply pasting the scriptlet in the URL field. Note: Safari (unlike most, more advanced third-party browsers) doesn’t support editing URL’s right at addition time; this is why I needed to first add a new bookmark and, afterwards, open it for editing. With a better browser, I could have done this in one step only – that is, right at adding the bookmark. Much quicker than with Safari.

On the video, the following happens: at 0:06, I highlight the scriptlet body and, immediately after that, I tap the “copy” label to copy it to the clipboard. Then, at 0:08, I tap the + icon on the bottom toolbar and, then, the “Add bookmark” menu item. Starting with 0:12, I enter a new name for the scriptlet. It’s preferable to assign a name that has something to do with the script itself (but, of course, it can be anything). In this chase, I’ve chosen the name “Height” because the scriptlet directly modifies the row height. I finish adding the bookmark by tapping Save in the top right corner. Immediately after this, at 0:18, I tap the Bookmark icon at the bottom so that I can go on with editing the newly-created bookmark. At 0:21, I tap edit in the bottom left corner; after this, now that the bookmarks have become editable, I tap the uppermost, just-added “Height” entry. Of it, I select the second field for editing. I quickly delete the previous contents of the textfield by tapping the X icon at the right end. After this, I tap the field itself and, when the “Paste” icon is displayed, I tap it (at 0:25). The body of the scriptlet is inserted and doesn’t need to be edited in any way – I can just return to the previous page by tapping the “Bookmarks” arrow in the upper left corner (at 0:30). Then, in the bookmark edit view, I tap “Done” in the lower left and, then, in the upper right corner. After this, I check whether the scriptlet is working OK: I zoom into the text of the current Web page, bring up the favorites (at 0:35) and just select the previously added and edited “Height”. At 0:38, you can clearly see the spacing between the rows has been increased.

2. Creating scriptlets without copy/paste

This older approach is a legacy one originating from the pre-OS3 days, where it still wasn’t possible to directly copy/paste any text to bookmark URL fields. This problem could easily be circumvented by clicking a link leading to any page and also containing the scriptlet in the address of this page – after a question mark. Then, all you need was (is) adding this (bogus) page and, while/after doing so, modifying the address by just taking out the original address of this (bogus) page from before the scriptlet itself.

The advantage of this approach on an OS3 device is that links won’t in any way messed up by content manager engines and frameworks, unlike pure text. The latter, in most cases, doesn’t have any spaces; content management engines are highly likely to mess them up by introducing spaces here and there, even breaking up (long) function names and rendering them unrecognizable. One of the ways of fighting this is picking up the scriptlet text from an in this respect “safe” site like iPhone Life; another one is just removing all spaces by hand and the third is adding the bookmark as a pseudo-link. The latter is discussed in this section.

I found it necessary to provide a demo video of the entire process as it may be a bit complicated for a newbie. (AGAIN: if you copy the scriptlet contents from a “safe” content manager like the blog engine of iPhone Life, you may want to stick with the easier and simpler “copy/paste” approach outlined above! You may only want to use this approach if and only if the current content manager engine is known to insert spaces in source code not specified in special “code” blocks – or, if your operating system is pre-OS3; that is, it doesn’t support copy/paste at all.) This will surely be easier than just a still image-based tutorial like the one I’ve published previously.

The video is HERE and shows the steps already outlined in the just-linked tutorial. Note that, as opposed to Chapter 1, it shows adding the old (and, now, outdated – you’ll want to use the brand new one, with “find next” functionality, in Chapter 3 below, the first bullet in the list) “find in page” code – not the one used in Chapter 1; that is, increasing the spacing between text rows on a web page. (This is why, for example, a “find in page” dialog is displayed when, at the end of the video, I test it.)

3. Adding the lifeclever.com scriptlets

Finally, don’t forget there are some nice additional scriplets HERE.

The homepage states adding these bookmarks require a desktop-based Safari to work (an excerpt: “To use, just drag the links into Safari’s Bookmarks Bar and synch them to your iPhone via iTunes. Next, bring up the Bookmarks Bar folder on your iPhone and simply tap the bookmarklet you want to use. ”). Should you want to add them directly on your iPhone, it’s a bit more complicated because they are pure Javascript links and not (bogus) “true” HTML links to an external Web site with embedded Javascript code. This means the following:

1, in Safari, when you tap and hold these links, you’ll only offered the chance of opening (executing) them – not copying (screenshot). (Which you’d want to be able to paste them in a bookmark.) That is, you can’t do anything with them in Safari.
2, the same stands for (the current, 1.3 version of) Journey Web Browser (where only Open and Open in New tabs are available; neither will work in the intended way)
3, in iNetDual 1.2.0 (which sports specially good scriptlet support) tap-and-holding links will result in “Copy” being displayed (screenshot); that is, there, you can directly copy them to the clipboard and, later, paste it to a bookmark.
4, Perfect Browser 2.7 works in exactly the same way as Safari (only “Open” is displayed) (screenshot).
5, the (otherwise, in no way recommended) Full Screen Web Browser 1.1.1 works exactly like Safari (“Open” only) (screenshot).
6, last but in no way least, my preferred Web browser, iCab Mobile, displays the script in its entirety and also has a “Copy” menu item. Nevertheless, as far as the current, 2.0 version is concerned, it displays the scriptlet in its entirety, which, with very long scriptlets like the first one (Find in page) may render the menu totally invisible as can be seen HERE. Fortunately, with shorter ones like THIS, it remains, more or less, visible.

To help out all non- iNetDual / iCab Mobile users (and also those of the latter with very long links), I’ve converted all the lifeclever.com scriptlets to “real”, bookmarkable, copy-able URLs that can be bookmarked from any browser (and, then, you can go the usual way of editing the bookmark URL – that is, just removing http://go.to/?, as can be seen in the video in Chapter 2, from the beginning). They are as follows:

1. Find in this page (note that I’ve selected Richard Harris’ one posted on Sep 15, 2009 instead of the original one; it has even implemented the highly useful “find next” functionality.)

2. Open links in new window