beatzball
/ blog / article-jsvim-vi-control-with-greasemonkey-200807111355

jsVim - Vi control for your browser

Published: 2008-07-11

If you like keyboard shortcuts, or you know how to use Vi to control navigation of a page, then you’re going to love this! (this is not to be confused by jsvi which allows vi control for a textarea in your browser)

I used to use a Firefox extension called Vimperator that basically allowed me to control and navigate through websites using the keyboard with Vim like commands. It was a good tool, actually a great tool, but I got frustrated when I didn’t have this same functionality on Safari, or any Fluid apps (making web apps into a distinct desktop application).

I had planned initially on making jsVim work with websites I developed, but then I realized not too many people would be happy with Vim control on those pages, unless I had a unique activation key event that enabled the rest of the key commands. But anyway, I digress. So it occured to me that making it cross browser specific would be ideal, and the use of Grease[monkey,kit] would allow me to do that.

So long story short, I developed jsVim in javascript form and then created an accompanying Grease[monkey,kit] script to utilize jsVim. There’s still much work to be done (incorporating keyboard events for links/hrefs/onlicks, search/find, colon[:] console commands, etc), but I think what is available is a pretty good start to get this out into the wild.

You can use svn to check out the code, or you can just install the greasemonkey script and get to work using it right away (if you have grease[monkey,kit] already installed).

Here are some useful commands that should get you started working around in your browser:

- 'j' - scroll down on the page (like using the down arrow)
- 'k' - scroll up on the page (like using the up arrow)
- 'Shift+j' - scroll down a full page (like using the Page Down button)
- 'Shift+k' - scroll up a full page (like using the Page Up button)
- 'h' - scroll left on the page (like using the left arrow)
- 'l' - scoll right on the page (like using the right arrow)
- 'Shift+h' - Go Back in history (like the browser back button)
- 'Shift+l' - Go Forward in history (like the browser forward button)
- 'Shift+g' - goto the bottom of the page
- 'gg' or 'U' - goto the top of the page
- 'Alt+Shift+?' - disable jsVim keyboard shortcuts
- 'Esc' - re-enable keyboard shortcuts, remove cursor in a form field from view, remove bottom console window

The next big TODO, is to get link navigation working and a full out help menu when you press the ’?’ in the window. Any other ideas and comments are always welcome.

UPDATE: This script will not work with Firefox’s quick search.

Be sure to uncheck “Search for text when I start typing” in the

Preferences >> Advanced >> General settings

I’m sure there is a workaround for this, but in the meantime, to get quicksearch up is to type ’/’, i’ll have my quicksearch disabled until I can get this to work well