Chrome New Tab Page extension steal focus from the address bar

Asked 22/5, 2013 at 6:11 Answered 22/11, 2022 at 23:8

Solved javascript html google-chrome-extension

With Chrome 27, it seems that extensions that override Chrome's New Tab Page can't take focus away from Chrome's Omnibox like they used to in previous versions of Chrome.

Is there a new way to focus an input box in a New Tab Page, or has this functionality been disabled completely? :(

To test this, create an extension folder with three files:

1. manifest.json:

{
    "name": "Focus Test",
    "version": "0",
    "minimum_chrome_version": "27",
    "chrome_url_overrides": {
        "newtab": "newTab.html"
    },
    "manifest_version": 2
}

2. focus.js:

document.getElementById('foo').focus();

3. newTab.html:

<html>
    <body>
        <input id="foo" type="text" />
        <script type="text/javascript" src="focus.js"></script>
    </body>
</html>

Then, when you load the extension and open a new tab, the input field does not get focused on the new tab page.

I have also tried adding the autofocus attribute to the input field, but no luck either. The extension's new tab page can't take focus away from Chrome's Omnibox.

Any ideas? Is this a bug or a new "feature"?

Lori answered 22/5, 2013 at 6:11 Comment(4)

The Chrome documentation claims that "New Tab" pages should not be able to override the address bar/omnibox getting the focus, however whether it is actually possible I am not sure about. developer.chrome.com/extensions/override.html#tips – Mouthy 22/5, 2013 at 7:31

There are similar issues reported from other extensions but it looks like the opposite behavior occurs: code.google.com/p/chromium/issues/detail?id=232148 – Stedfast 6/6, 2013 at 19:41

I've actually filed an issue with Chromium. Waiting for confirmation to learn if this is a bug or not. code.google.com/p/chromium/issues/detail?id=243102 – Lori 7/6, 2013 at 1:38

Chromium team has concluded that this is a feature, not a bug. – Lori 12/6, 2013 at 19:31

ManifestV3 update

This answer is adapted from https://mcmap.net/q/1164273/-can-39-t-set-focus-to-input-in-chrome-extension.
This has been tested with both Manifest V2 and V3.
Tested in Google Chrome 99.0.4844.51 64-bit (Windows 10).

Replace the content of focus.js with:

  if (location.search !== "?x") {
    location.search = "?x";
    throw new Error;  // load everything on the next page;
    // stop execution on this page
  }

Add the autofocus attribute to the <input>.
Go to the Extensions page in Chrome and click the Load unpacked button. Choose the folder of your extension.
Open your new tab page. You might see a modal dialogue reading Change back to Google?. Click Keep it to keep your custom new tab page.

Inline Javascript - Manifest V2 only

If you're inlining the Javascript in the HTML file, then you'll need to take some extra steps:

After adding your inline Javascript to your HTML file, open DevTools (F12 key) and observe the error output in the Console. Example output you should see:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". 
Either the 'unsafe-inline' keyword, a hash ('sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='), or a nonce ('nonce-...') is required to enable inline execution.

Select & copy this hash.
Add a line to manifest.json to allow the JS to run, pasting in the hash you just copied between the single-quotes. E.g.:

"content_security_policy": "script-src 'self' 'sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='"

Go to the Extensions page again. Remove the extension, then re-add it using the Load unpacked button.
Open your new tab page. Your extension should now autofocus on the <input>.

Note inlining only works with Manifest V2; Manifest V3 returns a failure message when attempting to load the extension (even with a properly formed "content_security_policy" object in manifest.json, to replace the Manifest V2 "content_security_policy" string):

Failed to load extension
File C:\path\to\extension
Error 'content_security_policy.extension_pages': Insecure CSP value "'sha256-...'" in directive 'script-src'.
Could not load manifest.

Umbilicus answered 10/3, 2022 at 13:19 Comment(4)

Will this work with Manifest V3? Or if not, can you please provide an example for V3? – Lori 10/3, 2022 at 20:14

I have just tested and V3 does work - just need to update manifest.json with "manifest_version": 3,. I've also realised that steps 5-8 are only relevant if you're inlining your JS, which the OP isn't; I will adjust my answer. Thanks. – Umbilicus 11/3, 2022 at 12:2

Thanks very much. Upon further trialling, for a shortened, condensed version to keep the search property as small as possible, this seems to do the trick: let q = "?"; if (location.search !== q && !location.href.includes(q)) location.search = q; For what it's worth, also tried mucking around with history.pushState and changing location.href, but no luck. Just setting location.search allows the New Tab Page to steal focus with autocomplete as an attribute, or calling .focus(). – Lori 12/3, 2022 at 1:25

@ChrisMcFarland This is useful, thanks! – Umbilicus 15/3, 2022 at 16:34

As per the Chrome Extension Documentation,

Don't rely on the page having the keyboard focus. The address bar always gets the focus first when the user creates a new tab.

See reference here: Override Pages

Kurbash answered 2/7, 2013 at 0:32 Comment(2)

Yep, going to accept this. A pity though because this worked before Chrome 27! – Lori 2/7, 2013 at 3:58

I agree, I was very sad when it was removed. And P.S. Thank you! :) – Kurbash 2/7, 2013 at 4:3

Here's the solution for Manifest v3

chrome.tabs.onCreated.addListener((tab) => {
  if (tab.pendingUrl === 'chrome://newtab/') {
    chrome.tabs.remove(tab.id)
    chrome.tabs.create({
      url: '/index.html',
    })
  }
})

I saw a pretty old blog which updates the new tab conditionally. However, simply updating the tab does not steal the focus. I had to close the pending tab and open a new one.

Cons: An ugly chrome-extension://akfdobdepdedlohhjdalbeadhkbelajj/index.html in the URL bar.

Gallaway answered 22/11, 2022 at 23:8 Comment(0)

I have a cheap work around that allows stealing focus from address bar focus. It's not for everyone. I do actually do use this because I want to control a new tab focus just that bad in my own custom new tab solution:

<script>
  alert('Use enter key to cancel this alert and then I will control your focus');

  document.getElementById('...AckerAppleIsCrafty...').focus()
</script>

USE CASE: I built my own HTML chrome custom tab that has a search input that custom searches my history and bookmarks the way I like it too.

Cash me focusing outside how bout dat?

Godsey answered 21/1, 2021 at 15:52 Comment(0)

ManifestV3 update

Inline Javascript - Manifest V2 only

Recommended topics

Hot tags