Chrome extension for faster browser use, especially with complex web apps.

Latest Version

Version
0.19
Update
July 19, 2017
Size
364KiB
Developer
Category
Users
66
Rating
1 ★
Manifest Version
2
Web Store Status
Languages Support
English
See more
Permissions
ClipboardWrite
Storage
Tabs
See more

Chrome Typist Extension

## 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 (`` 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 (`
` 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).
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "background": { "persistent": true, "scripts": ["dist/background.bundle.js"] }, "commands": { "cmdline": { "suggested_key": { "default": "Ctrl+F", "mac": "MacCtrl+F" }, "description": "Enter cmdline mode" }, "exit": { "suggested_key": { "default": "Ctrl+C", "mac": "MacCtrl+C" }, "description": "Exit current mode" } }, "content_scripts": [{ "matches": [""], "js": ["dist/content.bundle.js"] }], "description": "Chrome extension for faster browser use, especially with complex web apps.", "icons": { "128": "dist/icons/typist-icon-128.png" }, "manifest_version": 2, "name": "Chrome Typist", "options_ui": { "page": "dist/options.html", "chrome_style": true }, "permissions": [ "clipboardWrite", "storage", "tabs" ], "short_name": "Typist", "version": "0.19", "web_accessible_resources": [ "dist/cmdline.html" ]}
Read more

How to download and manually install Chrome Typist extension for Chrome

Looking for a way to install Chrome Typist extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Chrome Typist extensions manually, this article outlines two simple methods to effortlessly install Chrome Typist extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Chrome Typist extension and manually install through Drag &Drop

If you ever need to manually install a Chrome Typist extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Chrome Typist Extension by clicking the "Download CRX" button on the website.

Look for the Chrome Typist extension you wish to install. Go to the website and download the Chrome Typist extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Chrome Typist extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Chrome Typist extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Chrome Typist extension for Chrome and install in Developer Mode

This is another method to install Chrome Typist extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Chrome Typist extension file

Select and download the Chrome Typist extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Chrome Typist extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Chrome Typist extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Chrome Typist extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Chrome Typist extension in 2 ways. We hope this guide proves helpful.

Similar Extensions