vim-like web browsing: tridactyl

A discussion on Mastodon today reminded me about tridactyl . Because I use it all the time, every day, and it’s completely non-intrusive, this is a tool I easily forget while I’m lost when switching to another machine and instinctively try to use a keybinding in my web browser.

Tridactyl is an extension for firefox-based web browsers that allow the user to control the browser with the keyboard only. It replaces the default control mechanism with one modelled on vim. I’ve been a vim-like browser for decades with (the now defuncts) vimperator and pentadactyl. There are also similar options for chrome-based browsers. In a nutshell, the power of tridactyl comes from its extensibility which allow you to complete most common tasks you want your browser to perform with a single key press. Even better, you can customize any actions you can think of (including calling for external commands) to your own keybinding.

Note that Qutebrowser is a well-known browser that has a built-in vim-like browsing feature (as well as Nyxt which also offers emacs-like browsing) and claims to go beyond some plugins’ limitations because most of them are based on the WebKitGTK+ WebKit1 API, which causes a lot of crashes. I personally have never ever encountered any crashes with tridactyl and my browser of choice Librewolf is also more suited to my needs (especially in terms of security). Hence, despite 3 tries, I decided to not use Qutebrowser but I could not write a post about vim-like browsing without mentioning it and it may be a better choice for you, who knows.

╭── Why the need for a vim-like browsing experience?

From the github page “Like Vim, Tridactyl is modal, with the default mode being “normal mode”. In “normal mode”, many functions are available using keybindings. In “command mode” (when the command line is shown), you can execute more complex commands, known as “ex-commands”. All Tridactyl functionality can be accessed by ex-commands. You can bind any ex-command to a normal-mode shortcut. We also support a .tridactylrc file, of which there is an example in the root of this repository.”

This should already give you an idea of the power of this tool. You can explore everything by typing :help after having installed the extension but we’ll try to keep things simple here with some of the default keybindings:

Navigating with the current page

• scroll the page
• enter “hint mode” to select a link to follow
• scroll to and focus the last-used input on the page
• reload page or hard reload page
• copy the current page URL to the clipboard
• navigate forward/backward though paginated pages
• increment/decrement the current URL by 1
• go to the parent of the current URL
• go to the root domain of the current URL
• zoom in/out/reset zoom
• jump to the next/previous part of the page
• Apply Caesar cipher to page
• Jumble words on page

Find mode

• open the Quick Find search box
• open the Find in page search box
• find the next/previous instance of the last find operation

Bookmarks and quickmarks

• bookmark the current page
• bookmark the current page, but allow the URL to be modified first
• bind a quickmark to the given key
• open a given quickmark in current tab/new tab/new window

Marks

• set a local mark (lowercase letter), or a global mark (uppercase letter)
• jump to a local mark (lowercase letter), or a global mark (uppercase letter)
• jump to the location before the last mark jump

Navigating to new pages

• open a URL (or default search) in current tab
• open a URL (or default search) in a new tab
• open a URL (or default search) in a new window
• open the clipboard contents in the current/new tab
• force a search using the default Tridactyl search engine (which you can define), opening in the current/new tab
• go back/forward in the tab history
• go to the pages you have set with set home [url1] [url2] …

Handling tabs

• close the current tab
• undo the last tab/window closure
• go to the next/previous tab
• go to the first/last tab
• go to the tab currently playing audio
• go to the last active tab
• bring up a list of open tabs in the current window; you can type the tab ID or part of the title or URL to choose a tab

Extended hint mode

• open an image (in current/new tab)
• save/save-as the linked resource
• save/save-as the selected image
• copy an element’s text to the clipboard
• copy an element’s title/alt text to the clipboard
• copy an element’s link URL to the clipboard
• copy an element’s anchor URL to the clipboard
• read the element’s text with text-to-speech
• delete an element from the page
• focus an element

Binding custom commands

You can bind your own shortcuts in normal mode with the :bind command. For example :bind J tabprev to bind J to switch to the previous tab.
Simply type :help bind for details about this command.

You can also define your keybindings in .tridactylrc directly. The line for the previous example would be bind J tabprev

It’s a good time in this post to also mention the great autocompletion that comes with tridactyl when using the command line. Whenever you start typing something after typing :, you’ll be given with a list of autocompletion and once you have entered a command you can simply tap to see all the options available for this command. That’s how you make your users happy to tweak things :)

╭── Going beyond navigation

Customize the Graphical User Interface (GUI)

We use our web browser so much that we like to feel at home with it and this is usually done by theming the browser and rearranging the bars (url, search…).

In addition to everything that tridactyl offers you, it also comes with theming options and GUI customization like you’d do in chrome.css but via the simple command guiset followed by:

• gui

  • full
  • none

• tabs

  • always
  • autohide

• navbar

  • always
  • autohide
  • none

• hoverlink (the little link that appears when you hover over a link)

  • none
  • left
  • right
  • top-left
  • top-right

• statuspanel (hoverlink + the indicator that appears when a website is loading)

  • none
  • left
  • right
  • top-left
  • top-right

When simplicity is backed-up by simplicity

tridactyl could be an awesome tool by default and a magic one if you take time to learn and tweak the beast. It’s overall not that complicated and once done you will never have to redo it again because you can easily import/export settings stored in the external configuration tridactylrc file which you can also edit directly (which may be useful to create your bindings instead of using the :bind command nth times).

Using external programs

• (neo)vim

I currently have my blog control panel open in my browser but I’m writing this post in neovim (without the need for a (neo)vim plugin) and once done the text will be automatically pasted as a new post in my blog interface.
This function is integrated in tridactyl and called edit-in-Vim. Using the same function, with a single keybinding I can fill any online form or search box in (neo)vim. This is especially useful for forums for example where it’s faster to type your text with style in your own text editor.

This is possible thanks to the native messaging which enables an extension to exchange messages with a native application, installed on the user’s computer. The native messaging serves the extensions without additional accesses over the web.

• mpv

I now have other tools to access online videos with my favorite video player (mpv) but if you’d like you can bind the built-in function mpvsafe to any key to open online videos in mpv while browsing the internet without having to call the mpv yourself or copy/paste the video url.

╭── I couldn’t resist…

… to share one of my preferred command: fillcmdline Don’t be scared if you’re not familiar with tridactyl and it sounds weird to you but I think you may like it as well if you fall in love with this extension.

This command will basically prepopulate the commandline with some text for you so you can complete it before executing the command. The text can be a defined string or some text picked from another command. Here are two examples of the way I use it:

List and select one of my open tabs:

bind T fillcmdline bufferall

With that, I can hit T and a list of open tabs will be listed in my command line in my browser. From here I can chose which one I want to switch to.

Launch a search in a new tab

bind t fillcmdline_notrail tabopen search_engine_url&q=

Explanations:

• bind t: hitting t will open the commandline in the browser
• search_engine_url&q=: the text in the commandline will be my chosen search engine url (to be replaced in the command above) appended with &q=
• fillcmdline_notrail: enter the text with no trailing space
• tabopen: launch the command in a new tab