如何在新标签页上从Chrome扩展程序中的多功能框中窃取焦点？

我正在制作Chrome扩展程序，其中包括在新标签页上放置文本输入，并在加载新标签页时立即将焦点放在该输入文本上。暂时无法后得到用传统方法（如focus()）集中，我偶然发现了这个问题：如何在新标签页上从Chrome扩展程序中的多功能框中窃取焦点？

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

其中指出，Chrome浏览器现在已经说得那么，你不能一个新的选项卡上偷多功能框焦点页。鉴于Chrome浏览器可以专注于任何不是新标签页的网站，我一直在努力想出解决方法，但没有什么是真正令人满意的。

我已经试过：

具有新标签页立即重定向到本地存储的HTML文件，但是这仍然不放弃焦点，因为该网页重新导向从未有过的重点。
在内容脚本中重写ctrl + t和cmd + t以打开一个包含本地存储的HTML文件内容的新选项卡。这工作正常，除了它似乎你不能覆盖CMD + T，所以Mac用户将被迫使用CTRL + T。此外，某些站点（例如OneNote在线编辑器）接管了ctrl + t，因此它不适用于每个页面。
远程托管页面并让新标签页重定向到它（太慢）。
暗示用户按下Tab键两次集中输入文本打开一个新标签:)当

没有人有任何其他建议如何可能会解决这个限制？这对我的扩展非常重要。

谢谢！

来源

2013-07-11 GreysonP

你好，我的问题你链接！

在您的新标签页，包括以下JavaScript：

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

这将创建一个“正常”选项卡，然后关闭新标签页。然后，您可以在标准选项卡上输入框focus()。

这就是我为我的Fauxbar extension所做的。点击Chrome的新标签按钮（就输入框聚焦需要多长时间而言），它会稍微延迟一点，但我认为比按Tab键要好。

您也可以实现chrome.commands来创建键盘快捷键，用户可以在chrome：// extensions>键盘快捷键下自行修改键盘快捷键。

来源

2013-07-12 13:47:44

非常完美！非常感谢！我甚至不知道chrome.commands。这看起来非常有用！ – GreysonP

此外，Fauxbar看起来非常酷:) – GreysonP

只是注意，你最终会具有地址栏显示是这样的： “铬扩展：// /html/page.html” 这不会是空的之前 – sg88

我认为这种方式比@Chris的方式更好。

document.location.href = url;

更新：我测试了它，并在我的chrome上成功。虽然这种方式也很慢，但它比@Chris的方式更快。

这是明显的。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" 
}

这是index.html的

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

这是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; 
    }); 
}

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

这是运tions.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);

只需设置FILE_URL为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>

这就是全部。

写这个扩展的原因是扩展Vimium。然后，当我输入“t”打开一个新标签时，我可以使用vimiun而不用鼠标。因此，您不必编写javascript代码document.getElementById('file_url').focus();。

来源

2015-12-09 09:55:58 zhangnew

零解释，我不认为你了解问题/解决方案。 – Xan

如果你看看原来的问题，这是我尝试的第一件事：重定向到另一个本地存储的文件。但是，你仍然不会以这种方式获得焦点。 – GreysonP

@Xan你有试过吗？ – zhangnew

如何在新标签页上从Chrome扩展程序中的多功能框中窃取焦点？

回答

相关问题