A keyboard interface to the web, inspired by Kakoune

First tease of a keyboard interface to the web, inspired by Kakoune.


I have Vimium installed in my Firefox, and it’s pretty cool, but a Kakoune-themed extension would be cooler.

1 Like

It’s inspired by Kakoune, but differs a bit for the modes. Modal is based around the concept of contexts, as opposed to modes. For instance, you can have a page mapping on y to yank the page URL and the same key to yank a link address.

map(context, keys, command, description)

Example – Add mappings to yank pages and links:

modal.map('Command', ['KeyY'], () => Clipboard.copy(location.href), 'Copy page address')
modal.map('Link', ['KeyY'], (event) => Clipboard.copy(event.target.href), 'Copy link address')

Custom contexts are also supported (there is three by default). For example, you can create a context for videos (like illustrated in the video) and have h, j, k, l to seek or increase the volume.

Oh wow, this looks awesome!!!

Agreed, this is extremely cool! I too use Vimium but have wanted a more Kakoune-like experience in the browser. The contexts idea is clever and looks to be quite flexible. I’ll have to set aside some time to tinker around with your plugin. Do you have eventual plans to publish it as an official extension without having to loading it via developer mode?

Maybe later but not currently.

Currently I’m working on a native messaging application to be able to execute external commands. A use case could be to create mpv playlists on-the-fly with the hint mode, or search a tab with dmenu.

Here is a quick demo for playing videos with mpv and tab search with dmenu.

@elasticdog I can consider to push to the store now, but I would like to have some feedback before.

@Screwtapello I managed to make it work on Firefox, if you want to give a try.

There is also a live demo to experiment a bit without installing.

  • f β†’ Focus link
  • s β†’ Select element
  • Alt + a β†’ Select parent elements
  • Alt + i β†’ Select child elements
  • Alt + I β†’ Select links
  • Alt + k β†’ Keep (textContent)
  • Alt + K β†’ Keep (href)
  • Space β†’ Clear selections
  • F1 β†’ Show help

Another demo to skim through the sections of an article without a table of contents, using multiple selections (I changed the style of the selections).

A context can now inherit other contexts to allow to construct site-specific shortcuts.

Example – Mark GitHub notifications as read:

modal.filter('GitHub', () => location.hostname === 'github.com', 'Command')
modal.filter('GitHub Β· Notifications', () => location.pathname === '/notifications', 'GitHub')
modal.enable('GitHub Β· Notifications', 'GitHub', ...)

modal.map('GitHub Β· Notifications', ['KeyR'], document.querySelector('form[action="/notifications/mark"]').submit(), 'Mark all as read')

Example – Create a context for Gmail and use the built-in shortcuts:

modal.filter('Gmail', () => location.hostname === 'mail.google.com')
modal.enable('Gmail', ...)
1 Like

This is good stuff @alexherbo2 !

Hihi ^^