Turbocharge Firefox Browser With Vim Editor Functionality Using Vimperator Add-on

This article is part of the on-going Vi / Vim Tips and Tricks.  Firefox is the best browser. Vim is the best editor. Wouldn’t be nice if we can combine the best browser (Firefox) with the best editor (Vim)?

In this article let us review how to use the powerful Vim navigation concepts inside Firefox Browser using the Vimperator Firefox add-on. Let us review how to install the vimperator plugin, and 8 Powerful features to make Firefox browser behave like Vim.

You may be also interested in the following article, Transfer the Power of Vim Editor to Thunderbird for Composing Email’.

2 Steps to Install and Use Vimperator firefox Plugin

Step 1: Vimperator Firefox Plugin Installation

• Go to the vimperator.org, click on the icon ‘Download Vimperator’ to download the version 2.0, if you are using firefox 3.0+
• Select and download the version 0.5.3, if you are using firefox 2.

After downloading, click on Install which will install the plugin.  Restart the Firefox browser to start using the plugin.

Step 2: Don’t Panic. Get the Firefox Menus and Toolbars back.

As specified in the vimperator home page, Vimperator hides the Firefox menubar and toolbar by default. Until you get fully comfortable with Vimperator, you can display the menu-bar and toolbar by using the following set command.

:set guioptions+=mT

Since the browser will behave like Vim editor, you can type the above :set command right in the browser, which will display the command at the bottom of the browser as shown in the Fig below.

Fig: Enable the Firefox menu and Toolbar buttons

8 Powerful features to make firefox behave like Vim editor

Feature 1: Navigate Web Page Using Vim Editor Keystrokes

Start browsing any website or webpage just like how you would browse a text file in Vim editor. For example,

• gg – Go to the top of the web page.
• G – Go to the bottom of the web page.
• k – line scroll the web page downwards.
• j – line scroll the web page upwards.

Refer to our earlier article about: 8 Essential Vim Editor Navigation Fundamentals. You can pretty much use all the Vim navigation commands inside the firefox.

Feature 2: Basic Firfox Browser Operations using Keyboard

In a typical Vim Editor, we don’t browse websites. So, just the basic Vim navigation commands is not enough while browsing a website. We need keystrokes to open a URL, page forward and page backwards etc. Following table illustrates the basic browser operations along with the shortcuts.

Fig: ls command displays all open Firefox TABs (click on image to enlarge)

Feature 3: Vim Like Status Bar for Firefox Browser

You will get a status line like Vim where you will be able to see the following among many other useful informations:

• Progress of web page download while content is getting downloaded
• Total number of tabs opened
• Current Tab number
• Percentage of the page you are in. i.e Top of the page is 0% and bottom of the page is 100%.

Feature 4: Search The Web page Content like Vim Editor

• While browsing a webpage, you can use all the search facilities of vim such as ‘/’, ‘?’, ‘n’, ‘N’.
• Forward Search: You can easily search inside the web page by ‘/searchtext’ forward. Press ‘n’ to go to the next match. Press ‘N’ to go to the previous match.
• Backward Search: You can easily search inside the web page by ‘?searchtext’ backward. Press ‘n’ to go to the next match. Press ‘N’ to go to the previous match.

Feature 5: Follow a Link

If you want to click a link without touching the mouse, press ‘f’ which will highlight all the links on the page with a link-number in front of the link. Enter the link-number to start loading that specific link.

In the following webpage, when I pressed ‘f’, it highlighted all the links on the page in yellow and displays a number in front of it. So, if I want to open the “Ultimate Guide for Creating Strong Password”, I will press 7 (which is displayed in front of the link).

Fig: Press F to open Links on a webpage

Feature 6: Use Vim Editor Mark, Macro and Map Feature Inside Firefox

Mark:

You can do local and global bookmarks in web pages and you can return to the same location later. Read our previous article which explains about it How To Add Bookmarks Inside Vim Editor. The same concept works inside the Firefox browser using Vimperator plugin.

Macro:

You can record specific operations (for example, opening a website, entering your login information etc.) and associate it with a registry.  After recording the sequence of actions/clicks inside the Firefox browser, you can play it again by typing @ followed by the register name.

This is exactly the same macros concept that works in Vim editor.  For a detailed explanation of record and play, please refer to our previous article Vi and Vim Macro Tutorial: How To Record and Play.

Map:

You can map a job to a key. So, any time you type the key you will get the job done instantly as shown below.

:map gk o www.thegeekstuff.com

• :map – Vim command to create the map
• gk – Name of the map (map-name).
• o www.thegeekstuff.com – the command to be executed when the map name is called.

So by pressing gk, which will open this blog in the current page. To get to know about map in more detail, refer our previous article 3 Powerful Musketeers Of Vim Editor — Macro, Mark and Map

Feature 7: Vimperator Firefox Add-on Help and Tutorial

Similar to Vim help, you can access the help page for a specific topic directly from the browser by entering :help gt

:help gt

For vimperator Tutorial press F1 in Firefox which will take you to the tutorial. Or type :help which will take you to the tutorial page.

Feature 8: Handling Tabbed Browsing using Keystrokes

Use the following keystrokes to navigate across the Firefox open tabs.

Other than tab navigation, you can also perform the following tab operations.
Duplicate Tab: Sometimes you may want to duplicate the current window.  To open the same web page in another window, enter the following.

:tabduplicate

Reopen a Tab: Reopening a closed a tab, can be done using:

:u

Go to Tab: Going to the Nth tab can be done using:

:tn N

If you have 10 tabs open in Firefox and would like to jump to tab number 5, type :tn 5

Recommended Reading

Vim 101 Hacks, by Ramesh Natarajan. I’m a command-line junkie. So, naturally I’m a huge fan of Vi and Vim editors. Several years back, when I wrote lot of C code on Linux, I used to read all available Vim editor tips and tricks. Based on my Vim editor experience, I’ve written Vim 101 Hacks eBook that contains 101 practical examples on various advanced Vim features that will make you fast and productive in the Vim editor. Even if you’ve been using Vi and Vim Editors for several years and have not read this book, please do yourself a favor and read this book. You’ll be amazed with the capabilities of Vim editor.

Awesome Vim Editor Articles

Following are few awesome Vi / Vim editor tutorials that you might find helpful.

• Tutorial: Make Vim as Your C/C++ IDE Using c.vim Plugin
• Convert Vim Editor to Beautiful Source Code Browser for Any Programming Language
• 12 Powerful Find and Replace Examples for Vim Editor
• Vi and Vim Macro Tutorial: How To Record and Play

Note: Please subscribe to The Geek Stuff and don’t miss any future Vi and Vim editor tips and tricks.