Chrome Extensions to focus the first input field?

Question

I am looking for this Firefox extension called FirstField, but for Chrome. Essentially, you press a keyboard shortcut and it focuses the first text input field on the webpage (for example, the Wikipedia search). How difficult would it be to create this?

Answer 1

A quick search for focus on the Chrome Web Store brought up Input Focus. It looks like it will do what you want, press Ctrl+Alt+L to set focus on a page's first text field and then press the combo again to start cycling through whatever other text fields are on the page.

Answer 2

If you're looking for something even more comprehensive, I've been super happy with the Vimium Chrome Extension which is especially fluid if you know a bit of VI(M), but useful even if not.

If you install Vimium, you can snag the first input field by typing gi

You can then tab to other text entry fields.

Alternatively, you can prefix gi with a numeral, as in 3gi, which will start you on the third visible entry field.

As an additional alternative, you can type f which will give all the clickable links & elements (including text entry fields) on the page a short keyboard command (e.g. MN). You can then type this short stroke to jump focus there.

Answer 3

You can install TamperMonkey.

Open the Dashboard and click the + sign to add a new script.

This code focuses the first input on all websites on document load:

// ==UserScript==
// @name         Focus Input Global
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://*/*
// @grant        none
// ==/UserScript==


(function() {
    'use strict';

    // Your code here...
    document.getElementsByTagName('input')[0].focus();
})();

Explanation:

1. The // @match *://*/* is the URL pattern that matches the pages you want your script to run on, in this case *://*/* means all pages.
2. This line document.getElementsByTagName('input')[0].focus(); finds all input elements in the document using getElementsByTagName('input') and then focuses on the first one [0] using .focus().

---

If the // @match *://*/* doesn't work on some page, then create a new script targeting that specific page, ex: // @match https://www.google.com/*.

If the [0] doesn't work for a specific page, ex: // @match https://www.google.com/*, then try incrementing numbers to select the targeted input, [1],[2]...

If the getElementsByTagName doesn't work, then you can use one of the following:

• document.getElementsByName('search')[0].focus();
• document.getElementsByClassName('form-control')[0].focus();
• document.getElementById('id').focus();

Find the target element name, class or id in DevTools.

If the .focus() doesn't work, then you can try with .click().

---

If you want to trigger the focus with a keyboard shortcut Ctrl + Shift + L for ex google.com, then put this:

// ==UserScript==
// @name         Focus Input Google Key Combo
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.google.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    document.onkeydown = function (e) {
        // Detect if Ctrl + Shift is pressed together
        if (e.ctrlKey && e.shiftKey) {
            // Detect if L is pressed after Ctrl + Shift
            if (e.key == "L")
            {
                // Focus Input Element
                document.getElementsByName('q')[0].focus();
                document.getElementsByName('q')[0].select();
            }
        }
    };
})();

The .select() selects the input field value if you have previously something typed in.

Read more about keyboard combinations