How to steal focus from the omnibox in a Chrome extension on the new tab page?

问题

I'm making a Chrome extension that involves putting a text input on the new tab page, and immediately giving focus to that input text when the new tab page loads. After being unable to get focus using traditional methods (e.g. focus()), I stumbled upon this question:

Chrome 27: New Tab Page extension can't steal focus from Omnibox

which states that Chrome has now made it so that you can't steal omnibox focus on a new tab page. Given that Chrome is fine with giving focus to any site that isn't the new tab page, I've been trying to come up with workarounds, but nothing is really satisfactory.

I've tried:

Having the new tab page redirect immediately to locally-stored HTML file, but this still doesn't give focus because the page never had focus while redirecting.
Overriding ctrl+t and cmd+t in a content script to open up a new tab with the contents of a locally-stored HTML file. This works fine, except it seems you can't override cmd+t, so Mac users would be forced to use ctrl+t. Also, some sites (e.g. OneNote online editor) take over ctrl+t, so it doesn't work on every page.
Hosting the page remotely and having the new tab page redirect to it (far too slow).
Suggesting users press tab twice to focus on the input text when opening a new tab :)

Does anyone have any other suggestions as to how you might work around this restriction? It's pretty critical to my extension.

Thanks!

回答1:

Hello from my question you linked!

On your New Tab Page, include the following JavaScript:

chrome.tabs.create({ url: chrome.extension.getURL("foo.html") });
window.close();

This will create a "normal" tab, and then close the New Tab Page. You can then focus() your input box on the normal tab.

This is what I've done for my Fauxbar extension. It adds a slight delay when clicking Chrome's New Tab button (in terms of how long it takes for your input box to become focused), but I reckon it's better than having to press Tab.

You could also implement chrome.commands to create keyboard shortcuts that users can modify themselves under chrome://extensions > Keyboard shortcuts.

回答2:

I think this way is better than @Chris 's way.

document.location.href = url;

Update: I tested it and succeed on my chrome. Although this way is slow, too.But it's faster than @Chris 's way.

This is manifest.json

{
    "name" : "my extension",
    "description" : "my extension",
    "version" : "0.1",
    "manifest_version" : 2,
    "chrome_url_overrides" : {
        "newtab" : "html/index.html#newTab"
    },
    "permissions" : [
        "tabs",
        "<all_urls>",
        "history",
        "bookmarks",
        "chrome://favicon/*",
        "unlimitedStorage",
        "management",
        "clipboardWrite",
        "clipboardRead",
        "contextMenus",
        "notifications",
        "storage"
    ],
    "browser_action" : {
        "default_icon" : "icon.png",
        "default_popup" : "html/popup.html",
        "default_title": "Click here!"
    },
    "options_page": "html/options.html"
}

This is index.html

<!DOCTYPE html>
<html>
  <head>        
    <script type="text/javascript" src="/js/newTabCheck.js"></script>
    <title></title>
  </head>
  <body></body>
</html>

This is newTabCheck.js

if (window.location.hash == '#newTab') {
    window.document.title = 'Loading...';
    chrome.storage.sync.get({
        file_url : 'http://www.google.com'
    }, function (items) {
        document.location.href = items.file_url;
    });
}

This is options.html

<html>
  <head>
    <title>My Test Extension Options</title>
  </head>
  <body>file path：
  <form>
  <input type="text" id="file_url" />
  <br />
  <button id="save">save</button> 
  <label id="status"></label> 
  <script type="text/javascript" src="/js/options.js"></script></form>
  </body>
</html>

This is options.js

// Saves options to chrome.storage
function save_options() {
    var file_url = document.getElementById("file_url").value;
    chrome.storage.sync.set({
        file_url : file_url
    }, function () {
        // Update status to let user know options were saved.
        var status = document.getElementById('status');
        status.textContent = 'save success！';
        setTimeout(function () {
            status.textContent = '';
        }, 750);
    });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
    chrome.storage.sync.get({
        file_url : 'http://www.google.com'
    }, function (items) {
        document.getElementById("file_url").value = items.file_url;
    });
}
document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);

Just set the file_url as focus.html

<html>
<head><title></title></head>     
<body>

save path：
<input type="text" id="file_url"></input>

<script type="text/javascript">
    document.getElementById('file_url').focus();
</script>
</body>
</html>

That's all.

The reason of write this extension is for the extention Vimium. Then when i type "t" to open a newtab,I can use the vimiun without mouse.For this reason, you don't have to write javascript code document.getElementById('file_url').focus();.

来源：https://stackoverflow.com/questions/17598778/how-to-steal-focus-from-the-omnibox-in-a-chrome-extension-on-the-new-tab-page

标签

javascript

google-chrome

google-chrome-extension

focus

omnibox