NickName:Chris McFarland Ask DateTime:2013-05-22T14:11:28

Chrome New Tab Page extension steal focus from the address bar

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"?

Copyright Notice：Content Author:「Chris McFarland」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/16684663/chrome-new-tab-page-extension-steal-focus-from-the-address-bar

Answers

Kristiyan Tsvetanov 2022-11-22T23:08:16

Here's the solution for Manifest v3\nchrome.tabs.onCreated.addListener((tab) => {\n if (tab.pendingUrl === 'chrome://newtab/') {\n chrome.tabs.remove(tab.id)\n chrome.tabs.create({\n url: '/index.html',\n })\n }\n})\n\nI 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.\nCons: An ugly chrome-extension://akfdobdepdedlohhjdalbeadhkbelajj/index.html in the URL bar.",

Jimadine 2022-03-10T13:19:10

ManifestV3 update\nThis answer is adapted from https://stackoverflow.com/a/11348302/1754517.\nThis has been tested with both Manifest V2 and V3.\nTested in Google Chrome 99.0.4844.51 64-bit (Windows 10).\n\nReplace the content of focus.js with:\n\n if (location.search !== "?x") {\n location.search = "?x";\n throw new Error; // load everything on the next page;\n // stop execution on this page\n }\n\n\nAdd the autofocus attribute to the <input>.\nGo to the Extensions page in Chrome and click the Load unpacked button. Choose the folder of your extension.\nOpen 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.\n\nInline Javascript - Manifest V2 only\nIf you're inlining the Javascript in the HTML file, then you'll need to take some extra steps:\n\nAfter 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:\n\nRefused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". \nEither the 'unsafe-inline' keyword, a hash ('sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='), or a nonce ('nonce-...') is required to enable inline execution.\n\n\nSelect & copy this hash.\nAdd a line to manifest.json to allow the JS to run, pasting in the hash you just copied between the single-quotes. E.g.:\n\n"content_security_policy": "script-src 'self' 'sha256-MK0Gypb4mkZTI11eCOtWT+mGYcJNpN5zccvhfeaRb6E='"\n\n\nGo to the Extensions page again. Remove the extension, then re-add it using the Load unpacked button.\nOpen your new tab page. Your extension should now autofocus on the <input>.\n\nNote 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):\nFailed to load extension\nFile C:\\path\\to\\extension\nError 'content_security_policy.extension_pages': Insecure CSP value "'sha256-...'" in directive 'script-src'.\nCould not load manifest.\n",

John Woodruff 2013-07-02T00:32:02

As per the Chrome Extension Documentation,\n\n\n Don't rely on the page having the keyboard focus. \n The address bar always gets the focus first when the user creates a new tab.\n\n\nSee reference here: Override Pages",