How to exploit Surfingkeys — a Vimium-like tool for Chrome

If I have to name one extension I can't live without when surfing the web, it must be Surfingkeys — a hidden gem among thousands of Chrome extensions.

If you are a developer, many of you must have been used to using Vim for editing your code. And Surfingkeys use the same approach for using letters as anchor points on the screen to navigate around the web, which helps you do many actions without clicking the mouse. Some of you may say it not worth remembering too many letters and keyboard shortcuts, but believe me, in the long term, all of the aggregated clicking actions can cost you so much time. With Surfingskey, you could navigate the web like a pro, an action could be taken by no time with extreme speed before anyone could ever figure out what the heck is actually going on.

I have used 2 Vimium Chrome extensions. These are:

cVim:

cVim

Vimium:

Vimium

These two almost perform most of the basic actions for a normal user, one can navigate the web easily by using any of these two.

But the more I get used to the Vim-like web surfing style, the more I require for extra features of the extension. For example, I want to bind my own keyboard shortcut with customized scripts for automating many repetitious actions. Finally, I found Surfingkeys — which indeed is my lifesaver. This extension has amazing vim visual mode and comes along with far more functionalities and customization abilities.

Surfingkeys

User guide

1. Installation

First, you need to install it in Chrome web store

surfingkeys chrome extension

2. Basic guide

• Keep in mind that Surfingkeys is disabled in the following domains: Chrome initial page, Google docs, Google sheets, etc. So don’t panic if you just install it but cannot figure out how to open it, maybe you are in one of the pages I have listed.

Chrome initial page

• The most basic idea of Surfingkeys is when you hit the f key, all anchor points would appear on the screen for you to select. By hitting the character or group of characters, you could click the relevant links. After that, hit Esc to escape the anchor-point mode, the web interface would back to normal.

• If I have to list all use cases here, this post would be too long and full of abundant information. The only thing I need to show you is the user guide dialog which pops up when you hit ?. The dialog would look like this, you could find all key binding for different actions listed below.

3. Some actions that I mostly use

Tab and window interaction

• t: open new tab
• x: close current tab
• W: open the current tab in a new window or merge it back to the previous window
• S: go to one tab on the left
• D: go to one tab on the right
• >>: move the current tab to the right
• <<: move the current tab to the left
• gx $: close all tabs after the current tab
• alt p: pin the current tab
• B: Go to most previously used tab
• T: View all tabs

Page interaction

• ?: open user guide dialog
• ;j: close Chrome download bottom shelf
• ob: open Google Chrome search right in the current page, type in your query and start opening the results on a new tab
• yg: screenshot/capture the current page
• yG: fully screenshot/capture the current page
• i: focus on the first input
• ab: bookmark the current page
• b: open you bookmark
• yy: copy the current page URL to clipboard
• : : open “command line” box on the current page. This box is like the spotlight search of MacOs. You can execute many commands there such as calculate, create sessions, site scripting, etc

Customization

This is the fun part I discover when using Surfingkeys, which is the ability to write my own code snippets and assign keyboard shortcuts to execute them.

To do this, right-click the Surfingkeys icon, choose Settings

• You would go to the key mappings screen where you can customize things. Tick the Advanced mode option. Then go write your own code in the text editing section

For example, below is code to auto-login a form when I go to one specific website. I have this idea when I have to visit this website on a regular basis. But the site forces my login session after a short period of time. Therefore, I want to login quickly using keyboard shortcuts instead of filling username and password repeatedly a thousand times

mapkey('<Ctrl-l>', 'fill in login form', function() {
 const origin = window.location.origin
 if(origin === "some-specific-domain"){           
  window.document.getElementById("username").value = username
   window.document.getElementById("password").value = password 
   window.document.getElementById("loginButton").click() 
   return 
 }

After finishing all the code, hit the Save button to save all changes. Go back to the website I want to log in, then by hitting “Ctr+l”, the login would be automatically completed. However, you have to learn a little bit of Javascript and HTML knowledge to do web scripting.

Demo

Final words

It is so great that I know Surfingkeys or Vim in general, they really speed up my operations and save me lots of time. Please spend some time to give them a try, explore more hidden gems on your own. I promise you would neither regret nor go back. Peace!