## Browsing web with keyboard
<!-- published: 2020_02_15 -->

Before Firefox decided to throw away it's [main advantage](https://yoric.github.io/post/why-did-mozilla-remove-xul-addons/), there was an awesome plugin that allowed to browse the web without mouse — [Vimperator](http://vimperator.org/). Now it is impossible with current API but there are several extensions[^saka-key][^tridactyl] that try to bring back some of this functionality.

Some very basic keyboard navigation exists in Firefox by default. If you press `'` or `/`, quick find will allow you to search link by text. Then press `Enter` to navigate - no mouse needed. But because Firefox does not allow to change hotkeys - this feature is pretty annoying, as `/` is usually reserved for search on many sites.

There was also my favorite [uzbl browser](https://www.uzbl.org/) (seems abandoned) and [Next browser](https://next.atlas.engineer/) (looks very promising).

For the experiment, me show how to achieve basic keyboard navigation in almost any browser with 3 simple commands!

<!--more --> 

Open any web page (try this one!), and enter Web Console: `F12` 

1. First add numeric index to all links and buttons on page:

    ```javascript
    document
        .querySelectorAll('a, button')
        .forEach((a, i) => a.setAttribute('dim-index', i));
    ```

2. Then make these numbers visible using `::after` pseudo-element:

    ```javascript
    document.head
         .appendChild(document.createElement('style')).sheet
         .insertRule('button::after, a::after { content: attr(dim-index); position: absolute;\
          background: yellow; color: black; vertical-align: super; font-size: smaller;}');
    ```

3. Finally navigate, lets say to link number 8:
    
    ```javascript
    document.querySelector('[dim-index^="8"]').click();
    ```

Should look like this:

<img src="//developer.run/pic/key-nav.png"/> 

For fun, I've packed this as web extension:

<a name="github" href="https://github.com/dmi3/userscripts/tree/master/navigator">Source on Github</a>

Press `n` hotkey to show numbers (you may need to press `Esc` before, if text field is focused). Then type number. If number is unique - it will click link automatically. In other case press `Enter`.

You can try it in [Chrome](https://developer.chrome.com/extensions/getstarted) or [Firefox](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/#Package_and_install) or use it as [userscript](https://www.tampermonkey.net/).

As a bonus it makes `/` key to focus on the search field on almost any site.

[^saka-key]: <https://addons.mozilla.org/en-US/firefox/addon/saka-key/>
[^tridactyl]: <https://addons.mozilla.org/en-US/firefox/addon/tridactyl-vim/>

🏷️Tip