All geek questions in one place

How to steal focus with omnibox in Chrome extension on new tab?

I am making a Chrome extension that includes entering text input on a new tab and immediately focusing on that source when loading a new tab. Unable to get focus using traditional methods (e.g. focus() ), I came across this question:

Chrome 27: new tab page extension cannot steal focus with Omnibox

which says that Chrome has now done it so that you cannot steal omnibox focus on a new tab. Given that Chrome is fine with an emphasis on any site that is not a new tab, I tried to come up with workarounds, but nothing really satisfactory.

I tried:

  • Now the new page is redirected directly to the locally stored HTML file, but this still does not give focus, because the page never had focus when redirecting.

  • Overriding ctrl + t and cmd + t in the contents of the script to open a new tab with the contents of the locally stored HTML file. This works fine, but it seems you cannot override cmd + t, so Mac users will have to use ctrl + t. In addition, some sites (such as the OneNote online editor) use ctrl + t, so it does not work on every page.

  • Placing a page remotely and redirecting a new page to it (too slow).

  • Offer users to double-click a tab to focus on input text when opening a new tab.

Does anyone have any other suggestions on how you can get around this limitation? This is pretty important for my extension.

Thanks!

+4
source share
2 answers

Hello from my question you related!

On the New Tab page, enter 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 focus() enter the input field on a regular tab.

This is what I did for my Fauxbar Extension . It adds a slight delay when you press the Chrome New Tab button (in terms of how long it takes for the input box to be focused), but I think this is better than pressing Tab.

You can also implement chrome.commands to create keyboard shortcuts that users can change themselves in chrome: // extensions> Shortcut. p>

+11
source

I think this method is better than the @Chris method.

 document.location.href = url;

Update: I tested it and succeeded on my chrome. Although this method is slow, too. But this is faster than the @Chris method.

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

What all.

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

0
source

Source: https://habr.com/ru/post/1490953/

More articles:


All Articles