clawjs

VIM-like browser extension.

Inspired by Tridactyl, but actually works in every browser you throw it at.

Works in (as far as I'm concerned) any browser, this can easily be put into a local browser extension, you can make a browser extension locally and just use this code and unpack it in your browser's extension library.

If you don't know how to make a browser extension I recommend installing one of the following existing browser extensions to help you use my code. Such as:

Code Injector, Tampermonkey, (chrome) Pagemanipulator

These extensions should guide you on how to do what you want with my code.

You can always also just paste this code in your browsers console for a one-time run.

whats different?

• Scrolling automatically keeps updating the positions of the layered frames.
• The script is activated more respectfully by pressing G and H simultaneously, as opposed to just pressing F in Tridactyl.
• The script uses keys that are easier in finger reach range of mostly all keyboard layouts from 25% and above.
• The script automatically keeps track of the buttons/elements currently in-frame and ignores other ones respectfully, updates when scrolling.
• The script makes use of less cryptic key tags when activated, read more about this below on how to use them.

how to use

Press SHIFT and ALT simultaneously to activate the frames on top of interactable elements.

Press SHIFT and ALT simultaneously again to disable the frames.

After enabling the frames, key tags are shown in the corner of each frame indicating which key you will have to press to interact with this element. When the key you want is pressed, all frames that did not have this key will disappear and the elements that remain will show new keys. this way you can narrow down quickly which element you want to interact with. Once there are no more combinations left, the element will be selected.

known issues/TODO

• Elements that can be scrolled within themselves could show key labels not directly visible to the client on activation.

issues with workarounds

• Event listeners of the page you're visiting might intervene with this script when/before activated.

i have not yet found a way to optimally avoid keyboard keys the DOM is already using, for now you can change your initialize settings on the bottom of claw.js

example initialize settings:

const claw = new ClawOverlay({
    keys: "QWERTYUIOPASDFGHJKLZXCVBNM".split(''), // Available keys for overlay selection
    refreshTimeout: 500, // Milliseconds between overlay refreshes
    toggleKeys: ['SHIFT', 'ALT'] // Press SHIFT + ALT to toggle overlays
});

Available keys: QWERTYUIOPASDFGHJKLZXCVBNM1234567890

Available modifiers: SHIFT, ALT, CONTROL and META (windows key)

you can also use multiple or less toggle keys in order to trigger the overlay

    toggleKeys: ['F', 'G', 'H'] // Press F + G + H to toggle overlays

or

    toggleKeys: ['F']  // Press just F to toggle overlays

want to use even less keys when navigating through the overlay?

try:

const claw = new ClawOverlay({
    keys: "ASD".split(''), // Available keys for overlay selection
    refreshTimeout: 500, // Milliseconds between overlay refreshes
    toggleKeys: ['CONTROL', 'ALT'] // Press CONTROL + ALT to toggle overlays
});

this way there will only be boxes labeled with A, S and D. Allowing you to narrow down the element you want to select by using only these 3 keys, get creative with it.

TIPS

When using tools like Code Injector to run my code, you could use the same code with different initialization settings for certain websites you usually visit. This way you can better shape your VIM-like experience while browsing on any website.