A keyboard interface to the web, inspired by Kakoune

Off Topic
1

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

6 Likes
2

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

1 Like
3

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.

4

Oh wow, this looks awesome!!!

5

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?

6

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.

7

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


8

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

9

@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
2 Likes
10

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).

11

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
12

This is good stuff @alexherbo2 !

13

Hihi ^^

14

Some updates. I added a contextual help, which is now built-in to Modal, and externalized the dmenu functionality in its own extension.

https://imgur.com/R70jFZZ

15

@elasticdog I pushed the extensions to the web store, but they have been rejected by the support. I’m trying to appeal the decision.

16

Did they give any feedback on the rejection reason?

17

Dear Developer,

We routinely review items in the Chrome Web Store for compliance with our Program policies to ensure a safe and trusted experience for our users. Your item “<extension-name>”, with ID: <extension-id>, is being taken down as it currently does not work or provide any functionality upon installation. Items on the Chrome Web Store should work and provide the promised functionality that aligns with the description of the item. Please review your item and make necessary changes so that it provides the function/service included in the item’s description. Once your item complies with Chrome Web Store policies, you may request re-publication in your developer dashboard. Your item will be manually reviewed for policy compliance which typically takes a few business days, prior to re-publication. If you have any questions about this item’s removal, you may reply to this email and the Chrome Web Store developer support team will follow up with you.

Important Note Repeated or egregious policy violations in the Chrome Web Store may result in your developer account being suspended. This may also result in the suspension of related Google services associated with your Google account.

Thank you for your cooperation,

Google Chrome Web Store team.

Developer Terms of Service: Umowa dla deweloperów Google Chrome Web Store  |  Extensions  |  Chrome for Developers
Program Policies: سیاست های برنامه  |  Chrome Web Store - Program Policies  |  Chrome for Developers
Branding Guidelines: دستورالعمل های برندسازی  |  Extensions  |  Chrome for Developers

Dear Developer,

Your items did not comply with our Developer Program Policies and was removed from the Google Chrome Web store.

Your items did not comply with the following section of our policy:

Products must not contain false or misleading information, including in the content, title, icon, description, or screenshots.

Here are some specific checks you can conduct to ensure your items complies with our policies.
Descriptions must directly state the functionality of the app so that users can understand the extension they are adding.
Screenshots must demonstrate the functionality of the extension in action.
Items are being taken down as they currently does not work or provide any functionality upon installation.

If you’d like to re-submit it, please modify the item so that it complies with the policies, then re-publish it in your developer dashboard. Please reply to this email for issues regarding this item removal.

Please keep in mind that after you resubmit your item, it will not be immediately published live in the store. All re-submitted items undergo a strict compliance review and will be re-published only if the item passes that review.

Important Note Repeated or egregious violations of the policies may result in your developer account being banned from the store. This may also result in the suspension of related Google services associated with your Google account. All re-submitted items will continue to be subject to the Chrome Web store program policies and terms of service.

Thank you for your cooperation,

Chrome Web Store Team.

It happened for the following projects:

18

Could this just be them reacting to chrome in the name?

19

@robertmeta I think the main reason is because Commands, Shell and dmenu don’t provide any functionality upon installation – They are APIs used in Configuration.

For the implementation, I coded the extension into different modules, with Configuration being the glue to external features. For example, if you check config.js, you will see it almost just contains mappings. I split the code into the following projects:

20

Commands

  • f → Focus link
    • Input: o
  • s → Select element
  • Alt + a → Select parent elements (2 times)
  • Alt + i → Select child elements (2 times)
  • Enter → Open link
  • Alt + i → Select child elements
  • Alt + k → Keep selections that match the given RegExp
    • Input: 720p
  • Alt + I → Select links
  • Alt + k → Keep selections that match the given RegExp
    • Input: Magnet
  • o → Open link in the associated application

Commands

  • f → Focus link
    • Input: a, l
  • s → Select element
  • Alt + a → Select parent elements (3 times)
  • S → Select elements that match the specified group of selectors
    • Input: tr td:first-child
  • Alt + I → Select links
  • Alt + y → Copy link text

Commands

  • % → Select document
  • S → Select elements that match the specified group of selectors
    • Input: h1, h2, h3
  • ( → Focus previous selection

Commands

  • q → Tab search with dmenu

Commands

  • p → Toggle picture-in-picture mode

Commands

  • f → Focus link
    • Input: e
  • s → Select element
  • Alt + a → Select parent elements
  • Alt + I → Select links
  • Control + Enter → Open link in new tab

Commands

  • f → Focus link
    • Input: a, w
  • s → Select element
  • Alt + a → Select parent elements (3 times)
  • Alt + I → Select links
  • Alt + m → Play with mpv in reverse order
1 Like