Chrome Typist

Premise

Stop clicking on things! Use Vim-style shortcuts to find and select inputs or links on webpages in Chrome.

Philosophy

Typist is half type-ahead-find, half Vim/Tmux emulator. It is my attempt to add the most useful and intuitive Vim bindings to Chrome, and to do so in a way that doesn't overlap or conflict with existing shortcuts.

Goals

• Bring the speed and comfort of Vim search to Chrome
• Fill out web forms without using a mouse
• Stop using Cmd+F to find fields buried on the page

Use

If you use Vim or Tmux, the keyboard shortcuts for Typist will feel familiar to you.

Modes

Typist has three modes: Inactive, Regex, and Browse.

Inactive

When the Typist cmdline is not visible, Typist is in Inactive mode. Press Ctrl+F (or the shortcut you defined on your extensions page) to bring up the Typist cmdline and start issuing commands.

• Press Ctrl+C (or the shortcut you defined on your extensions page) to blur document.activeElement; for example, to exit from a text input you are typing in.

Regex

Typist is in Regex mode when you are typing into the cmdline / prompt. The text you enter into the prompt will be fed as a regular expression to a script that searches the current page for matches. Matches, as long as there are fewer than the maximum number, will be highlighted in yellow.

Typist is searching for node matches, not just text matches. So if you type "c.*k" in Regex mode your query will match a link whose text is "Click here," and the entire link will be highlighted. The assumption is that you want to manipulate the link, and not just the matching text within it.

• Press Ctrl+P in Regex mode to issue the "Back" command and go back in the browser history. Press Ctrl+N in Regex mode to issue the "Forward" command and go forward in the browser history.

• Press Ctrl+K in Regex mode to issue the "Clear tabs" command and close all unpinned tabs.

• Press Ctrl+M, followed by any number between 1 and 9, in regex mode to issue the "Move tab" command and move the currently selected tab to that integer position in your window. This command will fail if you try to move an unpinned tab to a position before the last pinned tab, or to move a pinned tab to a position after the first unpinned tab.

• Press Enter to go into Browse mode and higlight the first match on the page. Press Shift+Enter to go into Browse mode and highlight the last match on the page.

• Press Ctrl+C to go into Inactive mode at any time.

Browse

Typist goes into browse mode when you hit enter in Regex mode. The cmdline will stay active but your input will not be recorded as text. Instead, you can issue commands by pressing any of the follow keys.

• N issues the "Browse next" command, which highlights the next match on the page.

• Shift+N issues the "Browse previous" command, which highlights the previous match on the page.

• Enter issues the "Select" command to the currently highlighted node. Selecting a node will do different things based on what type of node it is. Selecting will click on links, labels, and other elements and select the text inside text inputs.

• Shift+Enter issues the "Soft select" command to the currently higlighted node. Soft selecting a node gives the node browser focus (i.e., calls HTMLElement.focus()), even if it is not focusable by default.

• Cmd+Enter issues the "Open" command to the currently highlighted node. Only links (<a> tags) will respond to this command. They will open in a new tab.

• Shift+Enter issues the "Soft select" command to the currently highlighted node and focus that node.

• Y issues the "Yank" command to the currently highlighted node. Yanking a node copies its text, or, in the case of text inputs, its current value, to the clipboard.

• Cmd+Y issues the "Yank link" command to the currently highlighted node. Only links (<a> tags) will respond to this command. It copies the href attribute to the clipboard.

• Press Ctrl+C to go into Inactive mode or Ctrl+F to go into Regex mode at any time.

Options

Typist takes options for six display values: background color, border color, font, text color, informational text color, and warning color. The string value of these options will be applied to Typist's components' CSS unparsed, so you can use named colors or hex values, and you can set the font to one installed on your machine.

The final option, max matches, determines how many matches Typist will process at once on the page. Setting this value to a very high number may break some pages on generic RegEx searches like .. If the number of matches for the current query is above the max number, Typist will neither highlight nor focus on them, and the cmdline will show the number in red (or the warning color from the options). The default is 50.

PLEASE NOTE: Chrome will not always set up the keyboard shortcuts properly, so you may have to set them up yourself. After installing this extension, go to chrome://extensions and scroll to the bottom. Click Keyboard shortcuts, and assign whatever shortcuts you prefer (recommended are Ctrl + F for Enter cmdline mode and Ctrl + C for Exit current mode).