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.
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.
@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 (
Alt + K → Keep (
- 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.
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')
modal.filter('Gmail', () => location.hostname === 'mail.google.com') modal.enable('Gmail', ...)
This is good stuff @alexherbo2 !