Question

我正在制作Chrome扩展程序，其中包括在新标签页上放置文本输入，并在加载新标签页时立即将焦点放在该输入文本上。在无法使用传统方法（例如focus()）获得焦点后，我偶然发现了这个问题：

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，因此它不适用于每个页面。
远程托管页面并将新标签页重定向到它（太慢）。
在打开新标签时，建议用户按两次标签以关注输入文字:)

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

谢谢！

Answer 1

你好我的问题链接了你好！

在新标签页上，包含以下JavaScript：

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

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

这就是我为Fauxbar extension所做的。单击Chrome的“新标签”按钮会增加一点延迟（就输入框聚焦所需的时间而言），但我认为这比按Tab键更好。

您还可以实施chrome.commands来创建键盘快捷键，用户可以在chrome：// extensions＆gt;下修改自己。键盘快捷键。

Answer 2

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

document.location.href = url;

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

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

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

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

只需将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。然后当我输入＆＃34; t＆＃34;打开一个新的标签，我可以使用没有鼠标的vimiun。因此，你不必编写javascript代码document.getElementById('file_url').focus();。

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

2 个答案: