How to tab through search results in Safari

These no longer work as Google have removed this feature, so you can't just turn it out like you used to be able to. The way you used to be able to do this was through:

Google Search > Settings > Search Settings > Google Instant Prediction > On

but it no longer works. I was so sad to see this feature go that I wrote a hack to re-engineer it. So far it only works with Google Chrome, but can be adapted to work with all the others:

1. Install Chrome extension ShortKeys.
2. Click on the ShortKeys menu and select "Options"
3. Click on "Add" and fill in the following fields:

Keyboard Shortcut: tab

Behavior: Run JavaScript

Label as: Result Picker

4. Paste the following JavaScript into the JavaScript code to run:

   document.selectedResultId=0
   
   function selectResult(newId){
       els = document.querySelectorAll("div.r h3")
       if(newId < 0 || newId >= els.length)
           return  //Could modify for page nav...?
       rp = document.getElementById("result-pointer")
       if(rp != null){
           rp.remove()
       }
       document.selectedResultId=newId
       el = els[newId]
       lnk = el.parentElement
       el.innerHTML = "<div id=\"result-pointer\" style=\"position:absolute;left:-15px;\">&gt;</div>" + el.innerHTML
       lnk.focus()
   }
   document.onkeyup=function(event){
       if(event.keyCode==38)
           selectResult(document.selectedResultId-1)
       if(event.keyCode==40)
           selectResult(document.selectedResultId+1)
       if(event.keyCode==13){
         var el = document.querySelectorAll("div.r h3")[document.selectedResultId]
         var lnk = el.parentElement
         var url = lnk.href
         if(event.ctrlKey){
           var win = window.open(url,"_blank")
           win.blur()
           window.open().close()
         }
         else{
           document.location = url
         }
       }
   }
   selectResult(0)
   

   5. Configure the Activation Settings:

Active while in form fields (Checked)

Websites (Only specific sites)

URLS (one per line): *www.google.*

This is what the Options page should look like

6. Click Save and then close your browser.

Instructions:

• When you restart you should see a little blue (or black) ">" appear by search results when you hit tab.

• The up/down arrow keys make it cycle through the results.

• Hitting "Enter" will navigate to the highlighted result.

• Hitting "Ctrl+Enter" to open the result in a new tab.

Happy Searching!

If you pay attention to the status bar while hovering the link, you'll see that it initially points to the "clean" URL.

Only when you click on the link (with any of the three mouse buttons), a JavaScript event gets triggered that changes the link's destination to Google's URL redirection.

To verify my claim, just right-click any of the purple links and close the context menu. Unless you already visited the site from within Google's search results, you'll see that it changes colors.¹

I don't know exactly how Google injects the redirection URL², but the general idea is this:

// define a function `f' that changes a link's clean URL to a redirection URL
var f = function () {
    // prepend `http://www.google.com/url?rct=j&url=' to the link's target
    this.href = 'http://www.google.com/url?rct=j&url=' + escape(this.href);
    // don't invoke this function anymore when clicking the link
    this.removeEventListener('click', f);
    // don't invoke this function anymore when right-clicking the link
    this.removeEventListener('contextmenu', f);
}

// save all <a> tags in an array `a'
var a = document.getElementsByTagName('a');

// for each <a> tag in the array `a'
for (var i = 0; i < a.length; i++) {
    // execute function `f' when clicking the link
    a[i].addEventListener('click', f);
    // execute function `f' when right-clicking the link
    a[i].addEventListener('contextmenu', f);
}

You can try this jsFiddle to see how it works.

_{¹ Tested on Chromium 25 (Ubuntu 12.10) and Chrome 26 (Windows 7)}

_{² Minimized JavaScript is a bit difficult to read.}