January 7, 2011

Weekend Project: Add Vim Features to Firefox with Vimperator


If you ever find yourself wishing that other applications had Vim-keybindings, I have good news for you. At least, if you're a Firefox user. The news? Vimperator. It's a great add-on for Firefox that brings the power of Vim to Firefox. Have some time this weekend? You can be an expert with Vimperator by Monday.


Why would you want to Vim up your Firefox? I have a couple of stock answers to this. First off, if you're a Vim lover and geek simply because you can is all the reason you need. But if people continue to stare at you oddly while you fly through browsing and work without touching a mouse, you have your second reason — if you're a Vim fan or aspire to go mouseless as much as possible (as do many Linux users) then Vimperator will give you the tools you need to manage Firefox using mostly the keyboard.

Note that you don't have to stop using the mouse entirely. Vimperator doesn't take away your ability to use the mouse — it just adds the ability to navigate without it, plus some.

Yes, Vimperator does more than just let you scroll and search using the keyboard. We'll touch on some of that, too.

Getting Vimperator

Let's get started. If you want to use the Vimperator extension, you'll have to download it from the Vimperator site, as it's not in Mozilla's collection of add-ons for Firefox. (Tsk. It ought to be a mainline feature...) If you're on the 3.5 or 3.6 series, you'll want Vimperator 2.3.1. If you're on the 4.0 beta series (or final, if you happen to read this after 4.0 is released) you'll be wanting the Vimperator 3.0 development version. The 3.0 series does not work with Firefox 3.x because it takes into account some of the GUI changes in Firefox 4.0, like the dearly departed status bar.

Save the .xpi file, and then go to File -> Open. Select the .xpi and walk through Firefox's regular install process. Restart Firefox and now you'll be running Vimperator!

Using Vimperator

Now that Vimperator is installed, you'll notice that a few things have gone away — like the toolbar. The idea here, of course, is that Vimperator lets you do the things that the Toolbar does with the keyboard; so the toolbar is redundant with Vimperator installed. Also, removing the toolbar gives you extra space to look at Web pages in, which is good. Vimperator for Firefox 4.x leaves the Awesomebar, because it needs somewhere to display status.

But if you really, really want to have your toolbar you can. Type :set guioptions+=mT. Now you have the toolbar again!

I wanted to start there not only because it's one of the first questions you might have when running Vimperator the first time (where the heck did the toolbar go?) but also because it demonstrates command mode in Vimperator.

Naturally, Vimperator supports Vim-like keybindings as well. The h,j,k,l keys move you as they would in Vim, and so on. See the Vim Series we ran last year to get up to speed with Vim keybindings and such.

Let's look at some of the things that Vim doesn't do — like browse the Web. To go to a new URL, use the :open command, like open http://linux.com. In Vimperator 3.0, it has a completion feature that you can use to navigate through items that match bookmarks and Firefox history. So for instance, if I start typing :open linux (no http, here) it will start showing me items from my bookmarks and history. Hitting Tab will select the first one, and you can tab through the results and hit Enter when you find the right entry to go to that page.

Note that the autocomplete works with other Vimperator commands as well.

Instead of opening in the current window, you can use :winopen to open in a new window, or to open in a new tab use :tabopen.

Navigating through a Webcomic archive? If it has a number in the URL that specifies the comic number, you can go to the next by hitting Ctrl-a or go back one with Ctrl-x This works with any site where the URLs are sequential, of course — so it should work with picture galleries, blog entries, etc., as long as the previous/next pages have URLs with a number for each entry.

You can also navigate through a site by going up through parent directories, using gu. For instance, if you're at "http://mysite/blog/entry-blah.html" and type gu it will take you to "http://mysite/blog/" and so on. Using gU will take you immediately to the root URL.

Going back or forward through your history is as easy as typing :back or :forward. Like Vim, Vimperator supports counts, so you can add a number and go two or more pages forward/back by using counts.

Lastly, let's talk hints. The easiest way to navigate to URLs you see on a page is to type f or F, then look for the numbers on the page. The hint mode highlights each link with a number. Type the number and Firefox will go to that URL. The f hint mode will open the link in the current window, while F tells Firefox to open URLs in a new tab.

Vimperator is way too full-featured to explain every command here, and that's what the project documents are for anyway. This is another reason I recommend Vimperator, by the way — its documentation is excellent. To get help in Vimperator, it should not surprise you that all you need to do is type :help or :help command. You can also use :help keybinding where keybinding is the keybinding you want to look up (which is good if you don't know exactly what it does...).

Last thing that I want to point out about Vimperator commands. Love Vimperator, but sometimes it doesn't play well with keyboard commands for Web applications. Want to restore Gmail to its former glory and still have Vimperator installed? Use Ctrl-z to enter pass-through mode.

Vimperator Add-Ons

We love Firefox and Vim not only for their individual awesomeness, but because they can be extended and have new and even more awesome features added.

You'll be pleased to know that you can further extend the fun with extensions to Vimperator. Check out the collection of scripts on Google Code. Want to add a script? Put it in ~/.vimperator/plugins. You might need to create the directory first.

For a bit of recursiveness, you can use the vimperator syntax file to add syntax highlighting to Vim when creating vimperator scripts yourself. Yes, you can extend Vimperator your own bad self! Vimperator scripts are written with JavaScript and also some of Vim's command set.

Weekends are for Vim

There's a lot to explore in Vimperator, so take a weekend and install the extension and give it a try. It will take a while to get used to it, so it's far too frustrating to start using Vimperator during the working week. Instead, load up the laptop with Vimperator and then use it on the couch while you watch browse leisurely. By Monday, you'll be in pro mode and ready to go mouseless at work in Firefox.

Click Here!